@gperezmz/bb-plugin-thread-glance 0.1.2

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

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

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

@@ -0,0 +1,64 @@
+// What rows and headers are given to act with. The list keeps one object
+// while the settings it carries hold still; its callbacks read the latest
+// state, so a thread changing never renews it.
+import { createContext } from "react";
+import type { PluginSidebarSection, PluginSidebarThread } from "@get-bb/plugin-sdk/app";
+import type { Stamps } from "@/shared/contract";
+import type { HarnessIcon, Nesting, OrganizationMode } from "@/shared/preferences";
+import type { ThreadNotes } from "@/shared/contract";
+import type { Family } from "../model/families";
+import type { RowMenuAction } from "../model/menu";
+import type { OlderRow, ThreadRow } from "../model/view";
+import type { ProviderDisplay } from "./ProviderBadge";
+
+export interface ModelInfo {
+  /** The catalog's display name ("Haiku 4.5"), or the raw id when unknown. */
+  model: string;
+  reasoningLevel: string;
+}
+
+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[];
+  mode: OrganizationMode;
+  nesting: Nesting;
+  onNavigate(): void;
+  onToggleChip(row: ThreadRow): void;
+  onToggleOlder(row: OlderRow): void;
+  onToggleEnvironment(environmentId: string): void;
+  onMenuAction(action: RowMenuAction, thread: PluginSidebarThread, sectionId?: string | null): void;
+  onRename(threadId: string, title: string): Promise<void>;
+  loadModel(threadId: string, status: string): Promise<ModelInfo | null>;
+  openDetails(threadId: string): void;
+  /** Opens a new thread in an environment (folder menu). */
+  onNewThreadInEnvironment(environmentId: string, projectId: string, sectionId: string | null): void;
+  onRenameEnvironment(environmentId: string, name: string): Promise<void>;
+  onArchiveEnvironment(environmentId: string): void;
+}
+
+/**
+ * What changes with every event and only open details read: rows get their
+ * own slice as props instead, so one thread changing renders one row.
+ */
+export interface ListLive {
+  now: number;
+  stamps: Stamps;
+  notes: Readonly<Record<string, ThreadNotes>>;
+  familyOf(threadId: string): Family | undefined;
+}
+
+export const ListLiveContext = createContext<ListLive>({
+  now: 0,
+  stamps: { startedAt: {}, finishedAt: {}, pendingAt: {}, seenAt: {} },
+  notes: {},
+  familyOf: () => undefined,
+});

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

@@ -0,0 +1,129 @@
+// State glyphs, chip glyphs 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 { FLAG_GLYPHS, type ChipTone, type Flag, type Glyph, type Tone } from "../model/state";
+
+export const TONE_CLASS: Record<Tone, string> = {
+  attention: "text-attention",
+  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",
+  "muted-strong": "text-muted-foreground/75",
+  muted: "text-muted-foreground",
+  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";
+
+// The unread dot takes bb's timeline accent, the one blue bb has, so unread
+// reads against the neutral list; bb's own list draws it in the grey primary.
+export function UnreadDot({ label, className }: { label?: string; className?: string }) {
+  return (
+    <span
+      role={label ? "img" : undefined}
+      aria-label={label}
+      aria-hidden={label ? undefined : true}
+      className={cn("inline-block size-[6px] shrink-0 rounded-full bg-[var(--timeline-accent)]", className)}
+    />
+  );
+}
+
+export function GlyphIcon({
+  glyph,
+  label,
+  className,
+}: {
+  glyph: Glyph;
+  label?: string;
+  className?: string;
+}) {
+  if (glyph.icon === null) return null;
+  if (glyph.icon === "dot") return <UnreadDot label={label} />;
+  return (
+    <Icon
+      name={glyph.icon}
+      aria-label={label}
+      aria-hidden={label ? undefined : true}
+      className={cn(
+        "size-4 shrink-0",
+        TONE_CLASS[glyph.tone],
+        glyph.spin && SPIN,
+        glyph.shine && SHINE,
+        className,
+      )}
+    />
+  );
+}
+
+/** A plugin row status in place of the state glyph. */
+export function PluginStatusGlyph({ status }: { status: PluginSidebarThreadRowStatus }) {
+  const tone =
+    status.tone === "error"
+      ? "text-destructive"
+      : status.tone === "success"
+        ? "text-success-foreground"
+        : status.tone === "running"
+          ? "text-success motion-safe:animate-pulse"
+          : "text-muted-foreground";
+  return (
+    <Icon
+      name={status.icon}
+      aria-label={status.label}
+      className={cn("size-4 shrink-0", tone, status.tone === "running" && SHINE)}
+    />
+  );
+}
+
+export function FlagGlyph({ flag, className }: { flag: Flag; className?: string }) {
+  return <GlyphIcon glyph={FLAG_GLYPHS[flag]} className={className} />;
+}
+
+const COUNTER_ITEMS: readonly {
+  key: keyof Counters;
+  flag: Flag;
+  label: (count: number) => string;
+}[] = [
+  { key: "needsYou", flag: "needs-you", label: (n) => `${n} need${n === 1 ? "s" : ""} you` },
+  { key: "failed", flag: "unread-failed", label: (n) => `${n} failed` },
+  { key: "offline", flag: "offline", label: (n) => `${n} waiting for an offline machine` },
+  { key: "working", flag: "working", label: (n) => `${n} working` },
+  { key: "unread", flag: "unread", label: (n) => `${n} unread` },
+];
+
+/** Header counters: zero counters are not drawn. */
+export function CounterStrip({ counters, className }: { counters: Counters; className?: string }) {
+  const items = COUNTER_ITEMS.filter((item) => counters[item.key] > 0);
+  if (items.length === 0) return null;
+  return (
+    <span
+      role="group"
+      aria-label={items.map((item) => item.label(counters[item.key])).join(", ")}
+      className={cn("inline-flex shrink-0 items-center gap-1.5 text-xs tabular-nums", className)}
+    >
+      {items.map((item) => (
+        <span key={item.key} aria-hidden className="inline-flex items-center gap-0.5 text-muted-foreground">
+          <FlagGlyph flag={item.flag} className="size-3.5" />
+          {counters[item.key]}
+        </span>
+      ))}
+    </span>
+  );
+}

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

@@ -0,0 +1,127 @@
+// When a row's hover card opens: after the pointer really moves over the
+// row, or when a key moved focus onto it. Rows sliding under a still
+// pointer, focus put back after navigation, and the row you just left
+// open nothing.
+import { useEffect, useRef, useState, type FocusEvent, type PointerEvent } from "react";
+
+const OPEN_DELAY = 500;
+/** Keys that move focus, so the focus they bring may show a card. */
+const FOCUS_KEYS = new Set(["Tab", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End", "PageUp", "PageDown"]);
+
+/** The last input was a key that moves focus: `:focus-visible`, as far as the card is concerned. */
+let keyed = false;
+/** Bumped by every press and every navigation; an open scheduled before a bump never happens. */
+let epoch = 0;
+let listeners = 0;
+
+function onKeyDown(event: KeyboardEvent) {
+  keyed = FOCUS_KEYS.has(event.key);
+}
+
+function onPress() {
+  keyed = false;
+  epoch += 1;
+}
+
+/** Drops every pending card open, for a navigation. */
+export function cancelPendingCards(): void {
+  epoch += 1;
+}
+
+export interface RowCard {
+  open: boolean;
+  /** For the HoverCard: it may close the card, never open it. */
+  onOpenChange: (open: boolean) => void;
+  rowProps: {
+    onPointerEnter: (event: PointerEvent) => void;
+    onPointerMove: (event: PointerEvent) => void;
+    onPointerLeave: () => void;
+    onPointerDown: () => void;
+    onFocus: (event: FocusEvent) => void;
+    onBlur: () => void;
+  };
+}
+
+/** The card state for one row. Off for the active row and while `enabled` is false. */
+export function useRowCard(isActive: boolean, enabled: boolean): RowCard {
+  const [open, setOpen] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // Where the pointer entered: a move must leave this spot.
+  const entry = useRef<{ x: number; y: number } | null>(null);
+  // A press holds the card shut until the pointer leaves the row.
+  const pressed = useRef(false);
+
+  const cancel = () => {
+    if (timer.current !== null) clearTimeout(timer.current);
+    timer.current = null;
+  };
+  const schedule = () => {
+    if (timer.current !== null || !enabled || pressed.current) return;
+    const at = epoch;
+    timer.current = setTimeout(() => {
+      timer.current = null;
+      if (epoch === at) setOpen(true);
+    }, OPEN_DELAY);
+  };
+
+  useEffect(() => {
+    if (listeners++ === 0) {
+      // Keys pressed while no row listened say nothing about the next focus.
+      keyed = false;
+      document.addEventListener("keydown", onKeyDown, true);
+      document.addEventListener("pointerdown", onPress, true);
+    }
+    return () => {
+      cancel();
+      if (--listeners === 0) {
+        document.removeEventListener("keydown", onKeyDown, true);
+        document.removeEventListener("pointerdown", onPress, true);
+      }
+    };
+  }, []);
+
+  // Becoming or ceasing to be the open thread, or a menu or rename taking
+  // the row, closes the card and drops a pending open.
+  useEffect(() => {
+    cancel();
+    setOpen(false);
+  }, [isActive, enabled]);
+
+  return {
+    open: open && enabled && !isActive,
+    onOpenChange: (next) => {
+      if (next) return;
+      cancel();
+      setOpen(false);
+    },
+    rowProps: {
+      onPointerEnter: (event) => {
+        entry.current = { x: event.clientX, y: event.clientY };
+      },
+      onPointerMove: (event) => {
+        if (event.pointerType === "touch") return;
+        const from = entry.current;
+        if (from !== null && from.x === event.clientX && from.y === event.clientY) return;
+        entry.current = null;
+        schedule();
+      },
+      onPointerLeave: () => {
+        cancel();
+        entry.current = null;
+        pressed.current = false;
+      },
+      onPointerDown: () => {
+        pressed.current = true;
+        cancel();
+        setOpen(false);
+      },
+      onFocus: () => {
+        // One key, one focus: focus moved by code afterwards opens nothing.
+        if (!keyed) return;
+        keyed = false;
+        schedule();
+      },
+      onBlur: cancel,
+    },
+  };
+}

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

@@ -0,0 +1,18 @@
+// localStorage access that never throws (private mode, quota, bad JSON).
+
+export function readJson(key: string): unknown {
+  try {
+    const raw = globalThis.localStorage?.getItem(key);
+    return raw == null ? null : (JSON.parse(raw) as unknown);
+  } catch {
+    return null;
+  }
+}
+
+export function writeJson(key: string, value: unknown): void {
+  try {
+    globalThis.localStorage?.setItem(key, JSON.stringify(value));
+  } catch {
+    // The mirror is only for first paint; losing it costs one flash.
+  }
+}