fix: address review feedback on audit log page

- AuditLog: defer the admin gate until connections load so admins don't
  flash the denied state; keep the connection dropdown outside the gate
  so non-admins can switch to a connection they can access
- App: gate useEditorNavigation to the editor route so /audit-log no longer
  writes editor URL params (schema/object) or fires schema/table queries;
  reset the invalid-connection toast guard on valid connections
- useEditorNavigation/useQuery: thread an enabled flag through to disable
  schema/table queries and the URL-sync effect when inactive
- ObjectSidebar: add aria-label to the audit-log icon button and make the
  version tooltip trigger keyboard-focusable

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: tianzhou

src/App.tsx

@@ -39,8 +39,10 @@ function AppLayout() {
     return connections[0].id;
   })();
 
-  // Centralized URL state management - handles defaults and redirects
-  const navigation = useEditorNavigation(selectedConnectionId);
+  // Centralized URL state management - handles defaults and redirects.
+  // Only active on the editor route so it doesn't write editor params
+  // (schema/object) or fetch schemas while on other connection-scoped routes.
+  const navigation = useEditorNavigation(selectedConnectionId, isEditorRoute);
 
   const editorTabs = useEditorTabs(selectedConnectionId);
 
@@ -50,9 +52,16 @@ function AppLayout() {
 
     const isValidConnection = connectionIdFromUrl && connections.some(c => c.id === connectionIdFromUrl);
 
+    // Reset the once-per-invalid guard whenever we land on a valid connection,
+    // so a later invalid connectionId (on any scoped route) surfaces its toast.
+    if (isValidConnection) {
+      hasShownInvalidToast.current = false;
+      return;
+    }
+
     if (!connectionIdFromUrl) {
       navigate(`${location.pathname}?connectionId=${connections[0].id}`, { replace: true });
-    } else if (!isValidConnection) {
+    } else {
       if (!hasShownInvalidToast.current) {
         hasShownInvalidToast.current = true;
         toastManager.add({

src/components/sql-editor/ObjectSidebar.tsx

@@ -173,6 +173,7 @@ export function ObjectSidebar({
               <Button
                 variant="ghost"
                 size="icon-sm"
+                aria-label="Audit Log"
                 onClick={() => navigate(`/audit-log?connectionId=${connectionId}`)}
               >
                 <ScrollText className="h-4 w-4" />
@@ -185,7 +186,14 @@ export function ObjectSidebar({
         </Tooltip>
         <Tooltip>
           <TooltipTrigger
-            render={<span className="text-xs text-gray-400">v{__APP_VERSION__}</span>}
+            render={
+              <span
+                tabIndex={0}
+                className="text-xs text-gray-400 outline-none focus-visible:ring-2 focus-visible:ring-ring rounded"
+              >
+                v{__APP_VERSION__}
+              </span>
+            }
           />
           <TooltipContent side="top">
             Git commit {__GIT_COMMIT__}

src/hooks/useEditorNavigation.ts

@@ -32,7 +32,7 @@ interface UseEditorNavigationResult {
   setObject: (object: SelectedObject | null, options?: { replace?: boolean }) => void
 }
 
-export function useEditorNavigation(connectionId: string): UseEditorNavigationResult {
+export function useEditorNavigation(connectionId: string, enabled = true): UseEditorNavigationResult {
   const [searchParams, setSearchParams] = useSearchParams()
   const prevConnectionIdRef = useRef<string | null>(null)
 
@@ -46,7 +46,7 @@ export function useEditorNavigation(connectionId: string): UseEditorNavigationRe
     isLoading: isSchemasLoading,
     isFetching: isSchemasFetching,
     error: schemasError,
-  } = useSchemas(connectionId)
+  } = useSchemas(connectionId, enabled)
 
   // Determine the effective schema (from URL or default)
   const effectiveSchema = schemaFromUrl && schemas.includes(schemaFromUrl)
@@ -61,7 +61,7 @@ export function useEditorNavigation(connectionId: string): UseEditorNavigationRe
     isLoading: isTablesLoading,
     isFetching: isTablesFetching,
     error: tablesError,
-  } = useTables(connectionId, effectiveSchema || '')
+  } = useTables(connectionId, effectiveSchema || '', enabled)
 
   // Determine the effective object (from URL or default)
   const effectiveObject: SelectedObject | null = (() => {
@@ -108,6 +108,9 @@ export function useEditorNavigation(connectionId: string): UseEditorNavigationRe
 
   // Update URL when resolved state differs from URL state
   useEffect(() => {
+    // Skip entirely when this hook isn't driving the current route (e.g. /audit-log),
+    // so editor-specific params (schema/object) aren't written to unrelated URLs.
+    if (!enabled) return
     // Don't update URL while still loading
     if (!connectionId || isSchemasLoading) return
 
@@ -158,6 +161,7 @@ export function useEditorNavigation(connectionId: string): UseEditorNavigationRe
       )
     }
   }, [
+    enabled,
     connectionId,
     isSchemasLoading,
     isTablesLoading,

src/hooks/useQuery.ts

@@ -38,26 +38,26 @@ export const connectionKeys = {
 };
 
 // Get schemas for a connection
-export function useSchemas(connectionId: string) {
+export function useSchemas(connectionId: string, enabled = true) {
   return useQuery({
     queryKey: queryKeys.schemas(connectionId),
     queryFn: async () => {
       const response = await queryClient.getSchemas({ connectionId });
       return response.schemas;
     },
-    enabled: !!connectionId,
+    enabled: enabled && !!connectionId,
   });
 }
 
 // Get tables for a schema
-export function useTables(connectionId: string, schema: string) {
+export function useTables(connectionId: string, schema: string, enabled = true) {
   return useQuery({
     queryKey: queryKeys.tables(connectionId, schema),
     queryFn: async () => {
       const response = await queryClient.getTables({ connectionId, schema });
       return response.tables;
     },
-    enabled: !!connectionId && !!schema,
+    enabled: enabled && !!connectionId && !!schema,
   });
 }
 

src/pages/AuditLog.tsx

@@ -11,28 +11,31 @@ interface AuditLogProps {
 
 export default function AuditLog({ connectionId }: AuditLogProps) {
   const navigate = useNavigate()
-  const { data: connections } = useConnections()
+  const { data: connections, isLoading } = useConnections()
   const { hasAdmin } = useConnectionPermissions(connectionId)
 
-  // Admin-only page. Gate on the selected connection's admin permission.
-  if (!hasAdmin) {
-    return (
-      <div className="flex-1 bg-white text-gray-900 overflow-auto">
-        <div className="p-8">
-          <h1 className="text-3xl font-bold mb-2">Audit Log</h1>
-          <p className="text-gray-600">
-            You need admin permission on this connection to view its audit log.
-          </p>
-        </div>
-      </div>
-    )
-  }
+  // Permissions are derived from the connections query, so defer the admin gate
+  // until it resolves — otherwise admins briefly see the denied state on load.
+  const content = isLoading || !connections ? (
+    <div className="text-gray-500 text-sm">Loading…</div>
+  ) : !hasAdmin ? (
+    <p className="text-gray-600">
+      You need admin permission on this connection to view its audit log.
+    </p>
+  ) : (
+    <div className="flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-gray-300 py-16 text-gray-500">
+      <ScrollText size={32} />
+      <p className="text-sm">No audit log entries yet.</p>
+    </div>
+  )
 
   return (
     <div className="flex-1 bg-white text-gray-900 overflow-auto">
       <div className="p-8">
         <h1 className="text-3xl font-bold mb-8">Audit Log</h1>
 
+        {/* Connection selector stays outside the gate so a user without admin on the
+            current connection can still switch to one where they do have access. */}
         <div className="space-y-2 max-w-xs mb-8">
           <Label htmlFor="audit-connection">Connection</Label>
           <Select
@@ -52,10 +55,7 @@ export default function AuditLog({ connectionId }: AuditLogProps) {
           </Select>
         </div>
 
-        <div className="flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-gray-300 py-16 text-gray-500">
-          <ScrollText size={32} />
-          <p className="text-sm">No audit log entries yet.</p>
-        </div>
+        {content}
       </div>
     </div>
   )