fix: clean up row ref maps, show restored row focus, and cover cold permalinks

The row ref callbacks now delete entries when rows unmount so paginated audit and user browsing does not accumulate detached table rows. The users row gets the same focus-visible treatment as the grant and audit rows so restored keyboard focus is visible, and the audit drawer takes the tab container as a fallback for cold entryId permalinks where no opener was ever focused.

Author: dustinhealy

src/components/grants/AuditLogDetailDrawer.tsx

@@ -2,7 +2,7 @@ import * as Dialog from '@radix-ui/react-dialog';
 import { PrincipalType } from 'librechat-data-provider';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Badge, Button, Icon, IconButton } from '@clickhouse/click-ui';
-import type { ReactElement } from 'react';
+import type { ReactElement, RefObject } from 'react';
 import type * as t from '@/types';
 import {
   ACTION_BADGE_STATE,
@@ -41,6 +41,8 @@ interface AuditLogDetailDrawerProps {
    * caller is responsible for distinguishing this from `notFound` (which is
    * the 404 case where the request itself succeeded but the entry is gone). */
   loadError?: boolean;
+  /** Restore target for the no-opener path (cold `?entryId=` permalink), where the capture at open time is only `document.body`. */
+  fallbackRef?: RefObject<HTMLElement | null>;
 }
 
 function CopyableMono({
@@ -133,9 +135,10 @@ export function AuditLogDetailDrawer({
   notFound = false,
   loading = false,
   loadError = false,
+  fallbackRef,
 }: AuditLogDetailDrawerProps): ReactElement | null {
   const localize = useLocalize();
-  const returnFocus = useReturnFocus(open);
+  const returnFocus = useReturnFocus(open, fallbackRef);
 
   // Keep the last non-null entry so the close animation has content to render
   // while Radix Dialog slides the panel out. Without this, unmounting on

src/components/grants/AuditLogTab.tsx

@@ -114,6 +114,7 @@ export function AuditLogTab() {
   const [currentPage, setCurrentPage] = useState(1);
   const { message: announcement, announce } = useAnnouncement();
   const rowRefs = useRef<Map<string, HTMLTableRowElement>>(new Map());
+  const tabFallbackRef = useRef<HTMLDivElement>(null);
 
   const resetToFirstPage = useCallback(() => setCurrentPage(1), []);
   const searchFilter = useDebouncedFilter('', resetToFirstPage);
@@ -392,7 +393,11 @@ export function AuditLogTab() {
   const exportLabel = localize('com_audit_export_server');
 
   return (
-    <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto pt-4 pr-1 pl-1">
+    <div
+      ref={tabFallbackRef}
+      tabIndex={-1}
+      className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto pt-4 pr-1 pl-1"
+    >
       <div className="flex items-center justify-between gap-3">
         <div
           className="flex flex-1 flex-wrap items-center gap-3"
@@ -588,6 +593,7 @@ export function AuditLogTab() {
                   onKeyDown={(e) => handleRowKeyDown(e, entry.id)}
                   rowRef={(el) => {
                     if (el) rowRefs.current.set(entry.id, el);
+                    else rowRefs.current.delete(entry.id);
                   }}
                   localize={localize}
                 />
@@ -632,6 +638,7 @@ export function AuditLogTab() {
 
       <AuditLogDetailDrawer
         entry={selectedEntry}
+        fallbackRef={tabFallbackRef}
         /**
          * Drawer is open whenever a deep-link `entryId` is in the URL. This
          * keeps the panel mounted (showing a Loading state inside) while the

src/components/grants/GrantManagementTab.tsx

@@ -106,6 +106,7 @@ export function GrantManagementTab() {
                   }}
                   rowRef={(el) => {
                     if (el) rowRefs.current.set(key, el);
+                    else rowRefs.current.delete(key);
                   }}
                 />
               );

src/components/users/UsersPage.tsx

@@ -199,6 +199,7 @@ export function UsersPage() {
                   canManage={canManage}
                   rowRef={(el) => {
                     if (el) rowRefs.current.set(user.id, el);
+                    else rowRefs.current.delete(user.id);
                   }}
                 />
               ))}
@@ -279,7 +280,7 @@ function UserRow({
       ref={rowRef}
       tabIndex={-1}
       className={cn(
-        'cursor-pointer bg-(--cui-color-background-panel) transition-colors outline-none hover:bg-(--cui-color-background-hover)',
+        'cursor-pointer bg-(--cui-color-background-panel) transition-colors outline-none hover:bg-(--cui-color-background-hover) focus-visible:bg-(--cui-color-background-hover) focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-(--cui-color-outline)',
         !isLast && 'border-b border-(--cui-color-stroke-default)',
       )}
       onClick={onViewDetails}