feat: complete catalog sensitivity enhancements

frontend/src/shell/database-management/CatalogSyncDrawer.tsx

@@ -16,6 +16,7 @@ import {
   type CatalogSyncPhase,
   type CatalogSyncRun,
 } from "../../api/catalog-databases";
+import { useTailFollowing } from "../activityScroll";
 import { FleetLedgerDrawer } from "./FleetLedgerShell";
 
 interface Props {
@@ -127,6 +128,17 @@ export function CatalogSyncDrawer({
     retry: false,
     refetchInterval: run && terminal(run) ? false : 1_500,
   });
+  const latestEventSequence = events.at(-1)?.sequence ?? 0;
+  const {
+    followingTail: followingEventTail,
+    handleScroll: handleEventLogScroll,
+    jumpToTail: jumpToLatestEvent,
+    viewportRef: eventLogRef,
+  } = useTailFollowing<HTMLDivElement>({
+    active: open && Boolean(run),
+    resetKey: runId,
+    tail: latestEventSequence,
+  });
 
   const mergeEvents = (incoming: CatalogSyncEvent[]) => {
     if (incoming.length === 0) return;
@@ -416,9 +428,24 @@ export function CatalogSyncDrawer({
             <section className="mt-5" aria-label="Synchronization log">
               <div className="mb-2 flex items-center justify-between">
                 <h3 className="thot-label">Live log</h3>
-                <span className="text-xs tabular-nums text-muted-foreground">{events.length}</span>
+                <div className="flex items-center gap-2">
+                  {!followingEventTail && events.length > 0 ? (
+                    <Button type="button" variant="outline" size="xs" onClick={jumpToLatestEvent}>
+                      Jump to latest
+                    </Button>
+                  ) : null}
+                  <span className="text-xs tabular-nums text-muted-foreground">{events.length}</span>
+                </div>
               </div>
-              <div className="max-h-64 overflow-y-auto rounded-md bg-zinc-950 p-3 font-mono text-xs leading-5 text-zinc-200">
+              <div
+                ref={eventLogRef}
+                role="log"
+                aria-label="Synchronization events"
+                aria-relevant="additions"
+                tabIndex={0}
+                onScroll={handleEventLogScroll}
+                className="thot-catalog-drawer__event-log max-h-64 overflow-y-auto rounded-md bg-zinc-950 p-3 font-mono text-xs leading-5 text-zinc-200"
+              >
                 {events.length === 0 ? <p className="text-zinc-500">Waiting for events…</p> : events.map((event) => (
                   <p key={event.sequence} className={event.level === "error" ? "text-red-300" : event.level === "warning" ? "text-amber-300" : undefined}>
                     <span className="mr-2 text-zinc-500">{new Date(event.createdAt).toLocaleTimeString()}</span>{event.message}