@gperezmz/bb-plugin-thread-glance 0.4.1 → 0.5.0

package/dist/server.meta.json

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

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

@@ -39,7 +39,7 @@ export const OlderRowView = memo(function OlderRowView({ row, controller }: { ro
   );
 });
 
-/** The settled fold: a faint label, a hairline to the row's end, and a chevron. */
+/** The settled fold: a muted label, a hairline to the row's end, and a chevron. */
 export const SettledRowView = memo(function SettledRowView({ row, controller }: { row: SettledRow; controller: RowController }) {
   const { label, ariaLabel } = settledRowText(row);
   return (
@@ -48,7 +48,7 @@ export const SettledRowView = memo(function SettledRowView({ row, controller }:
       aria-expanded={row.expanded}
       aria-label={ariaLabel}
       onClick={() => controller.onToggleSettled(row)}
-      className="group/settled relative flex h-6 w-full items-center gap-2 rounded-md pr-1 text-left text-[11px] text-muted-foreground/70 outline-none hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring max-md:pointer-coarse:h-9"
+      className="group/settled relative flex h-6 w-full items-center gap-2 rounded-md pr-1 text-left text-xs text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring max-md:pointer-coarse:h-9"
       style={{ paddingLeft: rowIndent(0) }}
     >
       <span className="shrink-0 tabular-nums">{label}</span>
@@ -102,7 +102,7 @@ export const EnvironmentRowView = memo(function EnvironmentRowView({
         <span className="pointer-events-none relative min-w-0 flex-1 truncate">{row.label}</span>
       )}
       {row.flag !== null ? <FlagGlyph flag={row.flag} className="pointer-events-none relative size-3.5" /> : null}
-      <span className="pointer-events-none relative text-[11px] tabular-nums">{row.threadIds.length}</span>
+      <span className="pointer-events-none relative text-xs tabular-nums">{row.threadIds.length}</span>
       <Icon
         name={ICONS.expand}
         aria-hidden

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

@@ -21,6 +21,7 @@ import { EnvironmentRowView, OlderRowView, SettledRowView } from "./FoldRows";
 import { CounterStrip } from "./glyphs";
 import { visibleCounters } from "../model/counters";
 import { RenameEditor } from "./RenameEditor";
+import { HEADER_HOVER_HIDES, HEADER_HOVER_SHOWS } from "./input-modality";
 import { ROW_ICON_BUTTON, ThreadRowView } from "./ThreadRowView";
 
 export interface GroupController {
@@ -70,13 +71,13 @@ const GroupHeader = memo(function GroupHeader({
   });
   const compact = controller.compact;
   // Desktop: the counter sits flush right, and "+" and "…" fade in over its
-  // place on hover or focus, as a row's actions fade over its age. Nothing is
+  // place on hover or keyboard focus, as a row's actions fade over its age. Nothing is
   // kept for them otherwise. Phones keep them in line, always shown.
   const counterFade = compact
     ? ""
     : menuOpen
       ? "opacity-0"
-      : "group-hover/header:opacity-0 group-focus-within/header:opacity-0";
+      : HEADER_HOVER_HIDES;
   const actionsFade = compact
     ? ""
     : cn(
@@ -84,7 +85,7 @@ const GroupHeader = memo(function GroupHeader({
         dropActive ? "bg-sidebar-accent" : "bg-sidebar",
         menuOpen
           ? "opacity-100"
-          : "pointer-events-none opacity-0 group-hover/header:pointer-events-auto group-hover/header:opacity-100 group-focus-within/header:pointer-events-auto group-focus-within/header:opacity-100",
+          : HEADER_HOVER_SHOWS,
       );
   return (
     <div
@@ -163,10 +164,12 @@ const GroupHeader = memo(function GroupHeader({
                 </button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end" className="min-w-48">
-                <DropdownMenuItem onSelect={() => controller.onMarkAllRead(group)}>
-                  <Icon name={ICONS.markRead} aria-hidden className="size-4" />
-                  Mark all read
-                </DropdownMenuItem>
+                {group.hasUnread ? (
+                  <DropdownMenuItem onSelect={() => controller.onMarkAllRead(group)}>
+                    <Icon name={ICONS.markRead} aria-hidden className="size-4" />
+                    Mark all read
+                  </DropdownMenuItem>
+                ) : null}
                 {group.descriptor.kind !== "pinned" && group.descriptor.newThreadProjectId !== null ? (
                   <DropdownMenuItem onSelect={() => controller.onNewThread(group)}>
                     <Icon name={ICONS.newThread} aria-hidden className="size-4" />

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

@@ -22,6 +22,8 @@ export interface ListHeaderProps {
   needYouCount: number;
   needYouOnly: boolean;
   onToggleNeedYou(): void;
+  /** A thread in the list is unread; Mark all read is not drawn otherwise. */
+  hasUnread: boolean;
   onMarkAllRead(): void;
   prefs: Preferences;
   client: ClientPreferences;
@@ -34,6 +36,7 @@ export const ListHeader = memo(function ListHeader({
   needYouCount,
   needYouOnly,
   onToggleNeedYou,
+  hasUnread,
   onMarkAllRead,
   prefs,
   client,
@@ -54,16 +57,18 @@ export const ListHeader = memo(function ListHeader({
           title={needYouOnly ? "Show every thread" : "Show only what needs you"}
           onClick={onToggleNeedYou}
           className={cn(
-            "inline-flex h-5 shrink-0 items-center rounded-full px-1.5 text-[11px] leading-none tabular-nums outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+            "inline-flex h-5 shrink-0 items-center rounded-full px-1.5 text-xs leading-none tabular-nums outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
             needYouOnly ? NEED_YOU_ON : NEED_YOU,
           )}
         >
           {needYouCount} need you
         </button>
       ) : null}
-      <button type="button" aria-label="Mark all read" title="Mark all read" className={ROW_ICON_BUTTON} onClick={onMarkAllRead}>
-        <Icon name={ICONS.markRead} aria-hidden className="size-4" />
-      </button>
+      {hasUnread ? (
+        <button type="button" aria-label="Mark all read" title="Mark all read" className={ROW_ICON_BUTTON} onClick={onMarkAllRead}>
+          <Icon name={ICONS.markRead} aria-hidden className="size-4" />
+        </button>
+      ) : null}
       <Popover open={settingsOpen} onOpenChange={setSettingsOpen}>
         <PopoverTrigger asChild>
           <button type="button" aria-label="Thread Glance settings" title="Settings" className={ROW_ICON_BUTTON}>

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

@@ -45,7 +45,7 @@ export function ProviderBadge({
       aria-label={display.name}
       title={display.name}
       className={cn(
-        "inline-flex h-3.5 min-w-3.5 shrink-0 items-center justify-center rounded-[3px] border border-border px-px text-[8px] font-semibold leading-none tracking-tight text-muted-foreground",
+        "inline-flex h-3.5 min-w-3.5 shrink-0 items-center justify-center rounded-[3px] border border-border px-px text-[10px] font-semibold leading-none tracking-tight text-muted-foreground",
         muted && "opacity-60",
         className,
       )}

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

@@ -42,7 +42,7 @@ export function PullRequestBadge({ threadId }: { threadId: string }) {
     <span
       title={pullRequestLabel(pullRequest)}
       aria-label={pullRequestLabel(pullRequest)}
-      className={cn("shrink-0 text-[11px] tabular-nums", pullRequestTone(pullRequest.attention))}
+      className={cn("shrink-0 text-xs tabular-nums", pullRequestTone(pullRequest.attention))}
     >
       #{pullRequest.number}
     </span>

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

@@ -20,6 +20,7 @@ import {
   experimental_useSidebarThreads as useSidebarThreads,
   useEnvironmentProviders,
   useSdk,
+  useSidebarSplitLayout,
   useSidebarThreadDraftIds,
 } from "@get-bb/plugin-sdk/app";
 import type { PluginSidebarThread, PluginThreadListProps } from "@get-bb/plugin-sdk/app";
@@ -29,6 +30,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
 import { cn } from "@/lib/utils";
 import { useAutoExpand } from "../data/useAutoExpand";
 import { useClientPreferences } from "../data/useClientPreferences";
+import { useIdleSince } from "../data/useIdleSince";
 import { useNow } from "../data/useNow";
 import { usePreferences } from "../data/usePreferences";
 import { useScheduled } from "../data/useScheduled";
@@ -52,6 +54,7 @@ import { modelDisplayName } from "../model/details";
 import { groupIdForRoot } from "../model/groups";
 import { CounterStrip } from "./glyphs";
 import { cancelPendingCards } from "./row-card";
+import { useInputModality } from "./input-modality";
 import { GroupSection, type DropStates, type GroupController } from "./GroupSection";
 import type { ProviderDisplay } from "./ProviderBadge";
 import { ThreadDetails } from "./ThreadDetails";
@@ -113,19 +116,31 @@ function ThreadListBody({
   const [client, updateClient] = useClientPreferences();
   // The need-you filter is per window and starts off on every load.
   const [needYouOn, setNeedYouOn] = useState(false);
+  const root = useRef<HTMLDivElement>(null);
+  useInputModality(root);
   const sidebar = useSidebarThreads({ experimental_lifecycles: prefs.showArchived ? ["active", "archived"] : ["active"] });
   const actions = useThreadActions();
   const sdk = useSdk();
   const { providers } = useProviders();
   const { providers: environmentProviders } = useEnvironmentProviders();
   const draftIds = useSidebarThreadDraftIds();
-  const { stamps, markSeen, clearSeen } = useStamps();
+  const splitLayout = useSidebarSplitLayout();
+  // Every thread a split pane shows is open, not only the focused one.
+  const openThreadIds = useMemo(
+    () => new Set(splitLayout?.panes.flatMap((pane) => (pane.threadId === null ? [] : [pane.threadId])) ?? []),
+    [splitLayout],
+  );
+  const { stamps, loaded: stampsLoaded, markSeen, markIdle, clearSeen } = useStamps();
   const scheduled = useScheduled();
   const notes = useNotes();
+  // When the next child's failure becomes orphaned. The forest knows it, but
+  // the forest is built from the clock, so the clock takes it from state.
+  const [orphanDeadline, setOrphanDeadline] = useState<number | null>(null);
   const nextDeadline = useMemo(() => {
     const future = Object.values(scheduled).filter((at) => at > Date.now());
+    if (orphanDeadline !== null) future.push(orphanDeadline);
     return future.length > 0 ? Math.min(...future) : null;
-  }, [scheduled]);
+  }, [scheduled, orphanDeadline]);
   const now = useNow(nextDeadline);
 
   const [editingId, setEditingId] = useState<string | null>(null);
@@ -143,6 +158,7 @@ function ThreadListBody({
   const ready = sidebar.status === "ready";
   const threads = sidebar.threads;
   const byId = useMemo(() => new Map(threads.map((thread) => [thread.id, thread])), [threads]);
+  const idleSince = useIdleSince(threads, markIdle);
 
   const forest = useMemo(
     () =>
@@ -150,6 +166,7 @@ function ThreadListBody({
         ? buildForest({
             threads,
             activeThreadId,
+            openThreadIds,
             finishedAt: stamps.finishedAt,
             seenAt: stamps.seenAt,
             draftIds,
@@ -157,10 +174,15 @@ function ThreadListBody({
             now,
             notes,
             childAttention: prefs.childAttention,
+            idleSince,
+            idleAt: stamps.idleAt,
+            stampsLoaded,
           })
         : null,
-    [ready, threads, activeThreadId, stamps.finishedAt, stamps.seenAt, draftIds, scheduled, now, notes, prefs.childAttention],
+    [ready, threads, activeThreadId, openThreadIds, stamps.finishedAt, stamps.seenAt, stamps.idleAt, stampsLoaded, draftIds, scheduled, now, notes, prefs.childAttention, idleSince],
   );
+  const nextOrphanAt = forest?.nextOrphanAt ?? null;
+  if (nextOrphanAt !== orphanDeadline) setOrphanDeadline(nextOrphanAt);
   const { targets, prune } = useAutoExpand(hydrated ? forest : null, activeThreadId);
   // Projects with a thread on a branch: the rest need no default branch.
   const branchedProjectIds = useMemo(
@@ -273,7 +295,7 @@ function ThreadListBody({
 
   const runMenuAction = useCallback(
     (action: RowMenuAction, thread: PluginSidebarThread, sectionId?: string | null) => {
-      const context = { activeThreadId, finishedAt: stamps.finishedAt, seenAt: stamps.seenAt };
+      const context = { activeThreadId, openThreadIds, finishedAt: stamps.finishedAt, seenAt: stamps.seenAt };
       const fail = (message: string) => (error: unknown) => toast.error(message, { description: describeError(error) });
       switch (action) {
         case "open-in-split":
@@ -326,7 +348,7 @@ function ThreadListBody({
           return;
       }
     },
-    [actions, activeThreadId, clearSeen, markSeen, onNavigate, sdk, stamps.finishedAt, stamps.seenAt],
+    [actions, activeThreadId, openThreadIds, clearSeen, markSeen, onNavigate, sdk, stamps.finishedAt, stamps.seenAt],
   );
   const runMenuActionRef = useRef(runMenuAction);
   useLayoutEffect(() => {
@@ -335,9 +357,9 @@ function ThreadListBody({
 
   // The committed state for the controllers' callbacks: they read it when
   // called, so the controllers themselves stay put while threads change.
-  const latest = useRef({ forest, view, prefs, byId, activeThreadId, stamps });
+  const latest = useRef({ forest, view, prefs, byId, activeThreadId, openThreadIds, stamps });
   useLayoutEffect(() => {
-    latest.current = { forest, view, prefs, byId, activeThreadId, stamps };
+    latest.current = { forest, view, prefs, byId, activeThreadId, openThreadIds, stamps };
   });
 
   const loadModel = useCallback(
@@ -451,15 +473,13 @@ function ThreadListBody({
   /** 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 { activeThreadId, openThreadIds, stamps } = latest.current;
+      const plan = markAllReadPlan(trees, { activeThreadId, openThreadIds, 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 ${where}`);
-      } else if (plan.read.length > MARK_ALL_CONFIRM_ABOVE) {
+      if (plan.read.length > MARK_ALL_CONFIRM_ABOVE) {
         setConfirm({
           title: `Mark ${plan.read.length} threads read?`,
           description: `Every unread thread in ${where}, child threads included, will be marked read.`,
@@ -703,12 +723,13 @@ function ThreadListBody({
 
   return (
     <ListLiveContext.Provider value={live}>
-      <div className="flex w-full min-w-0 flex-col px-1.5 pb-2">
+      <div ref={root} 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}
+          hasUnread={view.hasUnread}
           onMarkAllRead={onMarkListRead}
           prefs={prefs}
           client={client}

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

@@ -32,6 +32,7 @@ import { RowContextMenuContent, RowDropdownMenuContent, type ContextMenuInput }
 import { SplitMiniMap, type MiniMapPane } from "./SplitMiniMap";
 import { ThreadDetails } from "./ThreadDetails";
 import { useRowCard } from "./row-card";
+import { ROW_HOVER_HIDES, ROW_HOVER_LAYS_OUT, ROW_HOVER_SHOWS } from "./input-modality";
 
 /** Two clicks on one row within this window start a rename, as in bb. */
 const RENAME_CLICK_MS = 400;
@@ -88,7 +89,7 @@ export interface ThreadRowViewProps {
   inPinned: boolean;
   /** Drop feedback from the list's drag state. */
   dropState: "valid" | "blocked" | "unchanged" | "before" | "after" | null;
-  /** The open thread is this one. */
+  /** The focused thread is this one. */
   active: boolean;
   /** Its title is being renamed. */
   editing: boolean;
@@ -309,7 +310,7 @@ export const ThreadRowView = memo(function ThreadRowView({
     ? ""
     : menuShowing
       ? "opacity-0"
-      : "group-hover/row:opacity-0 group-focus-within/row:opacity-0";
+      : ROW_HOVER_HIDES;
 
   const body = (
     <div
@@ -412,8 +413,6 @@ export const ThreadRowView = memo(function ThreadRowView({
               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`,
               )}
@@ -460,7 +459,7 @@ export const ThreadRowView = memo(function ThreadRowView({
                 <span
                   title={`On ${row.machine}`}
                   aria-label={`On ${row.machine}`}
-                  className="pointer-events-none max-w-20 truncate text-[11px] text-muted-foreground"
+                  className="pointer-events-none max-w-20 truncate text-xs text-muted-foreground"
                 >
                   {row.machine}
                 </span>
@@ -471,7 +470,7 @@ export const ThreadRowView = memo(function ThreadRowView({
             <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",
+                menuShowing ? "flex" : ROW_HOVER_LAYS_OUT,
               )}
             >
               {row.treeUnread ? (
@@ -526,7 +525,7 @@ export const ThreadRowView = memo(function ThreadRowView({
               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",
+                "pointer-events-auto relative z-10 inline-flex h-5 shrink-0 items-center gap-0.5 rounded-md px-0.5 text-xs 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)],
@@ -546,7 +545,7 @@ export const ThreadRowView = memo(function ThreadRowView({
           <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]">
+              <span key={text} aria-hidden className="invisible text-xs font-medium tabular-nums [grid-area:1/1]">
                 {text}
               </span>
             ))}
@@ -561,7 +560,7 @@ export const ThreadRowView = memo(function ThreadRowView({
                     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]",
+                      "pointer-events-none justify-self-end text-xs 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,
@@ -577,7 +576,7 @@ export const ThreadRowView = memo(function ThreadRowView({
                       ? "relative"
                       : menuShowing
                         ? "opacity-100"
-                        : "opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100",
+                        : ROW_HOVER_SHOWS,
                   )}
                 >
                   <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>

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

@@ -54,7 +54,7 @@ export interface ListLive {
 
 export const ListLiveContext = createContext<ListLive>({
   now: 0,
-  stamps: { startedAt: {}, finishedAt: {}, pendingAt: {}, seenAt: {} },
+  stamps: { startedAt: {}, finishedAt: {}, pendingAt: {}, seenAt: {}, idleAt: {} },
   notes: {},
   treeOf: () => undefined,
 });

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

@@ -13,7 +13,9 @@ export const TONE_CLASS: Record<Tone, string> = {
   destructive: "text-destructive",
   // bb's timeline accent: blue, readable on the sidebar in both themes.
   working: "text-[var(--timeline-accent)]",
-  background: "text-muted-foreground/50",
+  // Full muted: bb's shine dims the glyph by about a third, and at 75% its
+  // dim frames fell below 3:1 against the light sidebar.
+  background: "text-muted-foreground",
   "muted-strong": "text-muted-foreground/75",
   muted: "text-muted-foreground",
   none: "",
@@ -36,13 +38,14 @@ 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.
+// it reads as status yet stays fainter than every other glyph. Its tone alone
+// sets its colour, so it keeps 3:1 against the sidebar. 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)}
+      className={cn("inline-block size-2.5 shrink-0 rounded-full border-[1.5px] border-current", className)}
     />
   );
 }

package/features/thread-list/components/input-modality.ts

@@ -0,0 +1,51 @@
+// Which input moved focus last, keyboard or pointer, written on the list's
+// root as `data-input-modality`. Rows and group headers show their hover
+// actions for focus inside them only under `keyboard`, so a click that leaves
+// focus in a row does not keep its hover look once the pointer leaves.
+// `:focus-visible` says the same, but Chromium drops focus on Tab from a row's
+// link when the actions it would reach are shown by `:has(:focus-visible)`.
+import { useEffect, type RefObject } from "react";
+
+export type InputModality = "keyboard" | "pointer";
+
+/** The modality an event starts, or null for one that changes nothing. */
+export function modalityOf(event: { type: string; key?: string; metaKey?: boolean; ctrlKey?: boolean; altKey?: boolean }): InputModality | null {
+  if (event.type === "pointerdown") return "pointer";
+  if (event.type !== "keydown") return null;
+  // A shortcut or a lone modifier does not move focus, as Chromium's own
+  // `:focus-visible` treats them.
+  if (event.metaKey || event.ctrlKey || event.altKey) return null;
+  if (event.key === "Shift" || event.key === "Meta" || event.key === "Control" || event.key === "Alt") return null;
+  return "keyboard";
+}
+
+// What a row or group header shows while hovered or holding keyboard focus,
+// as whole class strings so Tailwind finds each one in the source.
+
+/** A row part that fades out on hover, for the actions that take its place. */
+export const ROW_HOVER_HIDES = "group-hover/row:opacity-0 in-data-[input-modality=keyboard]:group-focus-within/row:opacity-0";
+/** A row part that fades in on hover. */
+export const ROW_HOVER_SHOWS = "opacity-0 group-hover/row:opacity-100 in-data-[input-modality=keyboard]:group-focus-within/row:opacity-100";
+/** A row part laid out only on hover, so it takes no width at rest. */
+export const ROW_HOVER_LAYS_OUT = "hidden group-hover/row:flex in-data-[input-modality=keyboard]:group-focus-within/row:flex";
+/** A group header part that fades out on hover. */
+export const HEADER_HOVER_HIDES = "group-hover/header:opacity-0 in-data-[input-modality=keyboard]:group-focus-within/header:opacity-0";
+/** A group header part that fades in on hover, and takes the pointer only then. */
+export const HEADER_HOVER_SHOWS =
+  "pointer-events-none opacity-0 group-hover/header:pointer-events-auto group-hover/header:opacity-100 in-data-[input-modality=keyboard]:group-focus-within/header:pointer-events-auto in-data-[input-modality=keyboard]:group-focus-within/header:opacity-100";
+
+/** Keeps `data-input-modality` on the element current for the whole document. */
+export function useInputModality(root: RefObject<HTMLElement | null>): void {
+  useEffect(() => {
+    const onInput = (event: Event) => {
+      const modality = modalityOf(event as KeyboardEvent);
+      if (modality !== null) root.current?.setAttribute("data-input-modality", modality);
+    };
+    document.addEventListener("keydown", onInput, true);
+    document.addEventListener("pointerdown", onInput, true);
+    return () => {
+      document.removeEventListener("keydown", onInput, true);
+      document.removeEventListener("pointerdown", onInput, true);
+    };
+  }, [root]);
+}

package/features/thread-list/components/row-card.ts

@@ -80,7 +80,7 @@ export function useRowCard(isActive: boolean, enabled: boolean): RowCard {
     };
   }, []);
 
-  // Becoming or ceasing to be the open thread, or a menu or rename taking
+  // Becoming or ceasing to be the focused thread, or a menu or rename taking
   // the row, closes the card and drops a pending open.
   useEffect(() => {
     cancel();

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

@@ -0,0 +1,27 @@
+// When each thread last went from busy to idle, as this list saw it: the
+// orphaned-failure wait counts from it. Each change seen is also written to
+// the server's `idleAt` stamp, so a reload or another window keeps it.
+import { useEffect, useState } from "react";
+import type { PluginSidebarThread } from "@get-bb/plugin-sdk/app";
+import { trackIdle, type IdleTracker } from "../model/attention";
+
+const NONE: Readonly<Record<string, number>> = {};
+
+export function useIdleSince(
+  threads: readonly PluginSidebarThread[],
+  markIdle: (threadIds: string[]) => void,
+): Readonly<Record<string, number>> {
+  const [seen, setSeen] = useState<readonly PluginSidebarThread[] | null>(null);
+  const [tracker, setTracker] = useState<IdleTracker | null>(null);
+  // Adjusted during render, as React adjusts state from a changed input, so
+  // the render that sees the change already carries its time.
+  if (threads !== seen) {
+    const at = Date.now();
+    setSeen(threads);
+    setTracker((previous) => trackIdle(previous, threads, at));
+  }
+  useEffect(() => {
+    if (tracker !== null && tracker.wentIdle.length > 0) markIdle([...tracker.wentIdle]);
+  }, [tracker, markIdle]);
+  return tracker?.idleSince ?? NONE;
+}

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

@@ -1,5 +1,6 @@
 // A clock that ticks each minute (row ages) and at the next deadline
-// (scheduled → queued), so rows change without a request.
+// (scheduled → queued, a failure becoming orphaned), so rows change without
+// a request. A deadline already past ticks at once.
 import { useEffect, useState } from "react";
 
 export function useNow(nextDeadline: number | null): number {
@@ -11,8 +12,8 @@ export function useNow(nextDeadline: number | null): number {
   useEffect(() => {
     if (nextDeadline === null) return;
     const wait = nextDeadline - Date.now();
-    if (wait <= 0 || wait > 2 ** 31 - 1) return;
-    const timeout = setTimeout(() => setNow(Date.now()), wait + 50);
+    if (wait > 2 ** 31 - 1) return;
+    const timeout = setTimeout(() => setNow(Date.now()), Math.max(wait, 0) + 50);
     return () => clearTimeout(timeout);
   }, [nextDeadline]);
   return now;

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

@@ -4,25 +4,33 @@ import { useRealtime, useRealtimeConnectionState, useRpc } from "@get-bb/plugin-
 import type { RpcContract } from "@/shared/contract";
 import { CHANNELS, type StampSignal, type Stamps } from "@/shared/signals";
 
-const EMPTY: Stamps = { startedAt: {}, finishedAt: {}, pendingAt: {}, seenAt: {} };
+const EMPTY: Stamps = { startedAt: {}, finishedAt: {}, pendingAt: {}, seenAt: {}, idleAt: {} };
 const KINDS = new Set(Object.keys(EMPTY));
 
 export interface StampsState {
   stamps: Stamps;
+  /** The first listing came back, or failed: until then every map is empty for want of it. */
+  loaded: boolean;
   markSeen(threadIds: string[]): void;
+  /** Records on the server that these threads were just seen going idle. */
+  markIdle(threadIds: string[]): void;
   clearSeen(threadIds: string[]): void;
 }
 
 export function useStamps(): StampsState {
   const rpc = useRpc<RpcContract>();
   const [stamps, setStamps] = useState<Stamps>(EMPTY);
+  const [loaded, setLoaded] = useState(false);
   const connection = useRealtimeConnectionState();
   const wasConnected = useRef(false);
 
   const load = useCallback(() => {
     rpc.call("listStamps", null).then(
-      (result) => setStamps(result.stamps),
-      () => undefined,
+      (result) => {
+        setStamps(result.stamps);
+        setLoaded(true);
+      },
+      () => setLoaded(true),
     );
   }, [rpc]);
 
@@ -55,6 +63,13 @@ export function useStamps(): StampsState {
     },
     [apply, rpc],
   );
+  const markIdle = useCallback(
+    (threadIds: string[]) => {
+      if (threadIds.length === 0) return;
+      rpc.call("markIdle", { threadIds }).catch(() => undefined);
+    },
+    [rpc],
+  );
   const clearSeen = useCallback(
     (threadIds: string[]) => {
       if (threadIds.length === 0) return;
@@ -64,5 +79,5 @@ export function useStamps(): StampsState {
     [apply, rpc],
   );
 
-  return { stamps, markSeen, clearSeen };
+  return { stamps, loaded, markSeen, markIdle, clearSeen };
 }