fix: review round 2 — Clear watch progress clears only the resume point, big view focus by the way it arrived, dialog name, reason tooltip, backfill locks

frontend/src/components/ui/Tooltip.tsx

@@ -11,18 +11,22 @@ type Side = "top" | "bottom" | "left" | "right";
  *  is never clipped by an overflow/stacking ancestor, flips when the preferred side runs out of room
  *  and slides back inside the viewport near an edge.
  *  `always` bypasses the hints toggle (for a label that IS the primary affordance, e.g. the slim nav
- *  rail's flyout names); `openDelay` waits before showing (a rest-on-the-icon feel). */
+ *  rail's flyout names); `openDelay` waits before showing (a rest-on-the-icon feel); `stable` keeps
+ *  the wrapper with no hint to show, so a hint that comes and goes does not remount the element and
+ *  cost it the focus. */
 export default function Tooltip({
   hint,
   side = "top",
   always = false,
   openDelay = 0,
+  stable = false,
   children,
 }: {
   hint: string;
   side?: Side;
   always?: boolean;
   openDelay?: number;
+  stable?: boolean;
   children: React.ReactNode;
 }) {
   const hintsOn = useSyncExternalStore(subscribeHints, hintsEnabled, hintsEnabled);
@@ -42,7 +46,7 @@ export default function Tooltip({
   });
   const { setReference } = pop.refs;
 
-  if (!enabled || !hint) return <>{children}</>;
+  if ((!enabled || !hint) && !stable) return <>{children}</>;
 
   return (
     <>

frontend/src/components/ui/unavailable.ts

@@ -1,7 +1,10 @@
 /** An unavailable control's props. With a reason it stays focusable (`aria-disabled`, which
- *  `FocusSafeButton` keeps inert to a click, and the reason in its tooltip — DESIGN.md "Unavailable
- *  with a reason stays focusable"); without one it is plainly off. */
+ *  `FocusSafeButton` keeps inert to a click, and the reason read out with its name; the caller shows
+ *  it in a tooltip — DESIGN.md "Unavailable with a reason stays focusable"); without one it is
+ *  plainly off. */
 export function unavailable(disabled: boolean | undefined, reason: string | undefined) {
   if (!disabled) return {};
-  return reason ? { "aria-disabled": true as const } : { disabled: true };
+  return reason
+    ? { "aria-disabled": true as const, "aria-description": reason }
+    : { disabled: true };
 }