fix: clear stale connectionId after impersonation changes (#121)

<!-- CURSOR_AGENT_PR_BODY_BEGIN -->
## Problem

When an admin uses "View as" to impersonate a user who doesn't have
access to the currently selected connection, the UI shows a 403 error
("chat and editor access denied for this connection").

### Reproduction Steps
1. Admin selects `aws-rds-master` connection (only Arun/Gaurav have
grants)
2. Admin uses "View as" to switch to a user without access to that
connection
3. User sees 403 error in Agent/Editor/other connection-scoped sections

### User Experience
The user is stuck on a connection they cannot access, with no clear way
to recover. The connection appears selected in the sidebar, but all API
calls fail with 403.

## Root Cause

The frontend's `useConnectionManager` hook had an early return when
`connectionId` was set, without validating that the connection was
actually in the current user's `connections` array.

When impersonation changes:
1. Backend correctly returns only connections visible to the target user
via `ConnectionAccessService.getVisibleConnections()`
2. Frontend receives the new (filtered) connection list
3. **Bug**: The hook's `useEffect` returned early if `connectionId` was
set, keeping the stale connection
4. Section components then made API calls with the stale `connectionId`,
getting 403

```javascript
// Before (buggy):
useEffect(() => {
  if (connections.length === 0) return
  if (connectionId) return  // Early return without validation!
  // ...auto-select logic
}, [connections, connectionId, ...])
```

## Fix

### 1. Core fix in `useConnectionManager.js`

Added validation that `connectionId` exists in the `connections` array.
If not, clear it and auto-select from valid options:

```javascript
// After (fixed):
if (connectionId) {
  const stillValid = connections.some((c) => c.id === connectionId)
  if (stillValid) return
  // Clear the stale connection
  localStorage.removeItem('selectedConnectionId')
  setConnectionId(null)
}
```

### 2. Defensive guards in section components

Added guards in all connection-scoped sections to prevent rendering with
invalid connections:

- Check `isLoading` first - prevents rendering during connection list
refresh
- Check both `connectionId` AND `selectedConnection` - ensures the
connection is valid

This pattern was applied to all affected sections:
- `AgentChatSection` 
- `EditorSection`
- `DashboardsSection`
- `SchemaSection`
- `SchemaDocsSection`
- `SlowQueriesSection`
- `DigestSection`
- `CompanyKnowledgeSection`
- `MonitorSection`

### 3. Backend test added

Added `impersonatingUserWithoutAccessDeniesConnection()` test to verify
the backend correctly denies access when an admin views as a user who
lacks access to a connection.

## Security Considerations

**This fix does NOT weaken security:**
- The backend grant model remains unchanged
- Admin bypass for connection access is preserved  
- All API authorization checks (`assertCanReadConnectionContent`,
`assertCanUseChatEditor`, etc.) remain in place
- This fix only ensures the UI doesn't present inaccessible connections
as usable

## Testing

The fix ensures:
1. When impersonation changes, stale connections are cleared
2. Users see a proper "no connection selected" state instead of 403
errors
3. Auto-selection picks from the effective user's accessible connections

### Scenarios Covered
- ✅ Admin can access any connection (admin bypass preserved)
- ✅ Granted user can access assigned connections
- ✅ User without grant sees empty/appropriate state
- ✅ Impersonation where target user lacks access to admin's selected
connection

### Test Results
- `AccessControlServiceTest` passes (including new impersonation test)
- Frontend lint passes (no new errors introduced)

## Note for Stayflexi Deployment

On Stayflexi, only Arun and Gaurav have grants on the `aws-rds-master`
connection. Other users viewing as them or accessing that connection
will now see a proper "no connection selected" state rather than a
confusing 403 error. If broader access is needed, connection grants
should be added via **Manage Connections → Share**.

## Files Changed

| File | Purpose |
|------|---------|
| `src/lib/hooks/useConnectionManager.js` | Core fix: validate
connectionId against connections array |
| `src/components/sections/*.jsx` | Add isLoading and selectedConnection
guards |
| `src/components/sections/*.module.css` | Add loading spinner animation
|
| `backend/.../AccessControlServiceTest.java` | Add test for
impersonation with inaccessible connection |
<!-- CURSOR_AGENT_PR_BODY_END -->

<div><a
href="https://cursor.com/agents/bc-33392497-bd30-5d7a-a359-0dba4888d535?cursor_ref=pr_footer&cursor_cta=open_in_web"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://cursor.com/assets/images/open-in-web-dark.png"><source
media="(prefers-color-scheme: light)"
srcset="https://cursor.com/assets/images/open-in-web-light.png"><img
alt="Open in Web" width="114" height="28"
src="https://cursor.com/assets/images/open-in-web-dark.png"></picture></a>&nbsp;<a
href="https://cursor.com/background-agent?bcId=bc-33392497-bd30-5d7a-a359-0dba4888d535&cursor_ref=pr_footer&cursor_cta=open_in_cursor"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://cursor.com/assets/images/open-in-cursor-dark.png"><source
media="(prefers-color-scheme: light)"
srcset="https://cursor.com/assets/images/open-in-cursor-light.png"><img
alt="Open in Cursor" width="131" height="28"
src="https://cursor.com/assets/images/open-in-cursor-dark.png"></picture></a>&nbsp;</div>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>

Author: venkateshsakamuri-lab

backend/src/test/java/com/dbaagent/service/security/AccessControlServiceTest.java

@@ -359,6 +359,44 @@ void impersonatingDbaAllowsMutateSql() {
         assertFalse(accessControlService.isCurrentUserAdmin());
     }
 
+    /**
+     * An admin viewing as a user who lacks access to a connection sees access denied.
+     *
+     * <p>This is the backend counterpart to the frontend fix: when the admin selects a
+     * connection, then uses "View as" to switch to a user without access to that connection,
+     * the UI should not be able to make API calls against the connection. The UI fix clears
+     * the stale connectionId; this test ensures the backend also correctly denies access.
+     */
+    @Test
+    void impersonatingUserWithoutAccessDeniesConnection() {
+        com.dbaagent.model.User impersonator = new com.dbaagent.model.User();
+        impersonator.setId(1L);
+        impersonator.setUsername("admin");
+        impersonator.setRole("ADMIN");
+        com.dbaagent.model.User target = new com.dbaagent.model.User();
+        target.setId(2L);
+        target.setUsername("mart-viewer");
+        target.setRole("DEVELOPER");
+        com.dbaagent.security.ImpersonationContext.enter(
+            new com.dbaagent.security.ImpersonationContext.State(impersonator, target)
+        );
+        SecurityContextHolder.getContext().setAuthentication(
+            new UsernamePasswordAuthenticationToken("mart-viewer", null, List.of())
+        );
+
+        // The target user has no grant on conn-1
+        when(connectionAccessService.resolveAccess("conn-1", "mart-viewer", false))
+            .thenReturn(resolved("conn-1", EffectiveConnectionAccess.NONE, null));
+
+        // Verify: admin bypass is disabled during impersonation
+        assertFalse(accessControlService.isCurrentUserAdmin());
+
+        // Verify: attempting to access the connection should throw 403
+        ResponseStatusException ex = assertThrows(ResponseStatusException.class,
+            () -> accessControlService.assertCanUseChatEditor("conn-1"));
+        assertEquals(403, ex.getStatusCode().value());
+    }
+
     private ConnectionAccessService.ResolvedConnectionAccess resolved(
         String connectionId,
         EffectiveConnectionAccess effectiveAccess,

src/components/sections/AgentChatSection.jsx

@@ -3,10 +3,25 @@ import { useAuth } from '@/hooks/useAuth'
 import AgentChatPanel from '@/components/AgentChat/AgentChatPanel'
 
 export default function AgentChatSection() {
-  const { connectionId, selectedConnection } = useConnectionManager()
+  const { connectionId, selectedConnection, isLoading } = useConnectionManager()
   const { username } = useAuth()
 
-  if (!connectionId) {
+  // Wait for the connection list to load before rendering anything. Without this,
+  // we might render the agent panel with a stale connectionId from before an
+  // impersonation change — the new user's connection list hasn't loaded yet, so
+  // selectedConnection is undefined, but connectionId is still the old value.
+  if (isLoading) {
+    return (
+      <div style={{ padding: 40, color: '#6b7280', fontSize: 14 }}>
+        Loading connections…
+      </div>
+    )
+  }
+
+  // Either no connection selected, or the selected connectionId is not in the
+  // current user's connections (stale after impersonation). Both cases mean the
+  // user needs to pick a valid connection before chatting.
+  if (!connectionId || !selectedConnection) {
     return (
       <div style={{ padding: 40, color: '#6b7280', fontSize: 14 }}>
         Select a database connection to chat with the DeepSQL Agent.
@@ -20,8 +35,8 @@ export default function AgentChatSection() {
     <AgentChatPanel
       key={`${username || 'anon'}:${connectionId}`}
       connectionId={connectionId}
-      connectionName={selectedConnection?.connectionName}
-      canManageContent={Boolean(selectedConnection?.canManageContent)}
+      connectionName={selectedConnection.connectionName}
+      canManageContent={Boolean(selectedConnection.canManageContent)}
     />
   )
 }

src/components/sections/CompanyKnowledgeSection.jsx

@@ -1,12 +1,22 @@
-import { Building2 } from 'lucide-react'
+import { Building2, Loader2 } from 'lucide-react'
 import { useConnectionManager } from '@/lib/hooks/useConnectionManager'
 import CompanyKnowledgePanel from '@/components/company-knowledge/CompanyKnowledgePanel'
 import styles from './SectionEmpty.module.css'
 
 export default function CompanyKnowledgeSection() {
-  const { connectionId } = useConnectionManager()
+  const { connectionId, selectedConnection, isLoading } = useConnectionManager()
 
-  if (!connectionId) {
+  if (isLoading) {
+    return (
+      <div className={styles.root}>
+        <Loader2 size={24} color="#9ca3af" className={styles.spin} />
+        <p className={styles.subtitle}>Loading connections…</p>
+      </div>
+    )
+  }
+
+  // Either no connection or stale connectionId not in the effective user's list
+  if (!connectionId || !selectedConnection) {
     return (
       <div className={styles.root}>
         <div className={styles.iconWrap}><Building2 size={26} color="#9ca3af" /></div>

src/components/sections/DashboardsSection.jsx

@@ -1,5 +1,5 @@
 import { useState, useCallback, useEffect } from 'react'
-import { LayoutDashboard } from 'lucide-react'
+import { LayoutDashboard, Loader2 } from 'lucide-react'
 import { useConnectionManager } from '@/lib/hooks/useConnectionManager'
 import { useSetImmersive } from '@/lib/stores/useNavStore'
 import DashboardsHome from './DashboardsHome'
@@ -10,7 +10,7 @@ import emptyStyles from './SectionEmpty.module.css'
 // dashboard, a focused full-bleed builder workspace (sidebar hidden via the
 // nav store's immersive flag).
 export default function DashboardsSection() {
-  const { connectionId } = useConnectionManager()
+  const { connectionId, selectedConnection, isLoading } = useConnectionManager()
   const setImmersive = useSetImmersive()
   const [open_, setOpen] = useState(null) // null = gallery; 'new' | dashboard object = workspace
 
@@ -22,7 +22,17 @@ export default function DashboardsSection() {
   // Safety: never leave the app in immersive mode when this section unmounts.
   useEffect(() => () => setImmersive(false), [setImmersive])
 
-  if (!connectionId) {
+  if (isLoading) {
+    return (
+      <div className={emptyStyles.root}>
+        <Loader2 size={24} color="#9ca3af" className={emptyStyles.spin} />
+        <p className={emptyStyles.subtitle}>Loading connections…</p>
+      </div>
+    )
+  }
+
+  // Either no connection or stale connectionId not in the effective user's list
+  if (!connectionId || !selectedConnection) {
     return (
       <div className={emptyStyles.root}>
         <div className={emptyStyles.iconWrap}><LayoutDashboard size={26} color="#9ca3af" /></div>

src/components/sections/DigestSection.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from 'react'
-import { Newspaper, RefreshCw, Settings, Check, Clock, AlertCircle, Zap } from 'lucide-react'
+import { Loader2, Newspaper, RefreshCw, Settings, Check, Clock, AlertCircle, Zap } from 'lucide-react'
 import { slackDigestAPI, digestPreferencesAPI } from '@/lib/api/client'
 import { useConnectionManager } from '@/lib/hooks/useConnectionManager'
 import DigestPreferencesPanel from './DigestPreferencesPanel'
@@ -165,7 +165,7 @@ function DigestSection({ section }) {
 const DIGEST_PREFS_AUTOPEN_KEY = 'deepsql.digestPrefs.autoOpened.v1'
 
 export default function DigestFeedSection() {
-  const { connectionId, selectedConnection } = useConnectionManager()
+  const { connectionId, selectedConnection, isLoading: connectionsLoading } = useConnectionManager()
   const [digests, setDigests] = useState([])
   const [loading, setLoading] = useState(false)
   const [triggering, setTriggering] = useState(false)
@@ -257,6 +257,26 @@ export default function DigestFeedSection() {
     }
   }
 
+  // Wait for connection list to load first
+  if (connectionsLoading) {
+    return (
+      <div className={styles.root}>
+        <div className={styles.topBar}>
+          <div className={styles.topBarLeft}>
+            <Newspaper size={17} className={styles.topBarIcon} />
+            <span className={styles.topBarTitle}>DB Digest</span>
+          </div>
+        </div>
+        <div className={styles.feed}>
+          <div className={styles.loadingState}>
+            <Loader2 size={20} className={styles.spinning} color="#9ca3af" />
+            <span>Loading connections…</span>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className={styles.root}>
       {/* Top bar */}
@@ -309,15 +329,16 @@ export default function DigestFeedSection() {
           </div>
         )}
 
-        {!error && !loading && !connectionId && (
+        {/* Either no connection or stale connectionId not in the effective user's list */}
+        {!error && !loading && (!connectionId || !selectedConnection) && (
           <div className={styles.emptyState}>
             <Newspaper size={32} color="#d1d5db" />
             <h3>No connection selected</h3>
             <p>Select a connection to view its digest history.</p>
           </div>
         )}
 
-        {!error && !loading && !!connectionId && digests.length === 0 && (
+        {!error && !loading && !!connectionId && !!selectedConnection && digests.length === 0 && (
           <div className={styles.emptyState}>
             <Newspaper size={32} color="#d1d5db" />
             <h3>No digests yet</h3>

src/components/sections/EditorSection.jsx

@@ -1,12 +1,22 @@
 import { useConnectionManager } from '@/lib/hooks/useConnectionManager'
 import SqlRunnerTab from '@/components/tabs/Core/SqlRunnerTab'
-import { Code2 } from 'lucide-react'
+import { Code2, Loader2 } from 'lucide-react'
 import styles from './SectionEmpty.module.css'
 
 export default function EditorSection() {
-  const { connectionId } = useConnectionManager()
+  const { connectionId, selectedConnection, isLoading } = useConnectionManager()
 
-  if (!connectionId) {
+  if (isLoading) {
+    return (
+      <div className={styles.root}>
+        <Loader2 size={24} color="#9ca3af" className={styles.spin} />
+        <p className={styles.subtitle}>Loading connections…</p>
+      </div>
+    )
+  }
+
+  // Either no connection selected, or stale connectionId not in the current user's list
+  if (!connectionId || !selectedConnection) {
     return (
       <div className={styles.root}>
         <div className={styles.iconWrap}>

src/components/sections/MonitorSection.jsx

@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react'
-import { BarChart2 } from 'lucide-react'
+import { BarChart2, Loader2 } from 'lucide-react'
 import { slowQueriesAPI } from '@/lib/api/client'
 import { useConnectionManager } from '@/lib/hooks/useConnectionManager'
 import AnalyticsTab from '@/components/tabs/Monitoring/AnalyticsTab'
 import styles from './SectionEmpty.module.css'
 
 export default function MonitorSection() {
-  const { connectionId } = useConnectionManager()
+  const { connectionId, selectedConnection, isLoading: connectionsLoading } = useConnectionManager()
   const [hasData, setHasData] = useState(null) // null = loading
   const [loading, setLoading] = useState(true)
 
@@ -27,7 +27,18 @@ export default function MonitorSection() {
       .finally(() => setLoading(false))
   }, [connectionId])
 
-  if (!connectionId) {
+  // Wait for connection list to load first
+  if (connectionsLoading) {
+    return (
+      <div className={styles.root}>
+        <Loader2 size={24} color="#9ca3af" className={styles.spin} />
+        <p className={styles.subtitle}>Loading connections…</p>
+      </div>
+    )
+  }
+
+  // Either no connection or stale connectionId not in the effective user's list
+  if (!connectionId || !selectedConnection) {
     return (
       <div className={styles.root}>
         <div className={styles.iconWrap}>

src/components/sections/SchemaDocsSection.jsx

@@ -1,4 +1,4 @@
-import { FileText } from 'lucide-react'
+import { FileText, Loader2 } from 'lucide-react'
 import { useConnectionManager } from '@/lib/hooks/useConnectionManager'
 import { useSetActiveSection } from '@/lib/stores/useNavStore'
 import { useCompanyKnowledgeStore } from '@/lib/stores/useCompanyKnowledgeStore'
@@ -7,11 +7,21 @@ import styles from './SectionEmpty.module.css'
 import workspaceStyles from './TopLevelSection.module.css'
 
 export default function SchemaDocsSection() {
-  const { connectionId } = useConnectionManager()
+  const { connectionId, selectedConnection, isLoading } = useConnectionManager()
   const setActiveSection = useSetActiveSection()
   const setLinkedFilters = useCompanyKnowledgeStore((state) => state.setLinkedFilters)
 
-  if (!connectionId) {
+  if (isLoading) {
+    return (
+      <div className={styles.root}>
+        <Loader2 size={24} color="#9ca3af" className={styles.spin} />
+        <p className={styles.subtitle}>Loading connections…</p>
+      </div>
+    )
+  }
+
+  // Either no connection or stale connectionId not in the effective user's list
+  if (!connectionId || !selectedConnection) {
     return (
       <div className={styles.root}>
         <div className={styles.iconWrap}><FileText size={26} color="#9ca3af" /></div>

src/components/sections/SchemaSection.jsx

@@ -1,12 +1,22 @@
-import { Network } from 'lucide-react'
+import { Network, Loader2 } from 'lucide-react'
 import { useConnectionManager } from '@/lib/hooks/useConnectionManager'
 import BrainWorkspace from '@/components/tabs/Brain/BrainWorkspace'
 import styles from './SectionEmpty.module.css'
 
 export default function SchemaSection() {
-  const { connectionId } = useConnectionManager()
+  const { connectionId, selectedConnection, isLoading } = useConnectionManager()
 
-  if (!connectionId) {
+  if (isLoading) {
+    return (
+      <div className={styles.root}>
+        <Loader2 size={24} color="#9ca3af" className={styles.spin} />
+        <p className={styles.subtitle}>Loading connections…</p>
+      </div>
+    )
+  }
+
+  // Either no connection or stale connectionId not in the effective user's list
+  if (!connectionId || !selectedConnection) {
     return (
       <div className={styles.root}>
         <div className={styles.iconWrap}><Network size={26} color="#9ca3af" /></div>

src/components/sections/SectionEmpty.module.css

@@ -72,6 +72,14 @@
   background: #f9fafb;
 }
 
+.spin {
+  animation: sectionSpin 1s linear infinite;
+}
+
+@keyframes sectionSpin {
+  to { transform: rotate(360deg); }
+}
+
 .pills {
   display: flex;
   gap: 8px;