feat(frontend): manage Cognito users and groups, and test sign-in

The Cognito panel gains a test sign-in that shows the decoded ID and
access token claims, a groups section, and a per-user panel to enable or
disable, confirm, sign out everywhere, reset or set a password and change
group membership.

Delete confirmations (row and bulk) now say what else goes, driven by
the schema's deleteImpact, and the inspector follows list refreshes
instead of the click-time snapshot.

packages/frontend/src/components/CognitoGroupsSection.tsx

@@ -0,0 +1,64 @@
+import {Trash2} from 'lucide-react'
+import {useMutation, useQueryClient, type UseQueryResult} from '@tanstack/react-query'
+import {useState} from 'react'
+import {createUserPoolGroup, deleteUserPoolGroup} from '@/api/cloudProxyClient'
+import type {UserPoolGroup} from '@/types/resource'
+
+type Props = {
+    poolId: string
+    groupsQuery: UseQueryResult<UserPoolGroup[]>
+    groupsKey: unknown[]
+    runtimeReachable: boolean
+}
+
+export function CognitoGroupsSection({poolId, groupsQuery, groupsKey, runtimeReachable}: Props) {
+    const queryClient = useQueryClient()
+    const [name, setName] = useState('')
+    const [description, setDescription] = useState('')
+    const [precedence, setPrecedence] = useState('')
+    const refresh = () => queryClient.invalidateQueries({queryKey: groupsKey})
+
+    const createMutation = useMutation({
+        mutationFn: () => createUserPoolGroup('aws', poolId, {
+            name: name.trim(),
+            ...(description.trim() ? {description: description.trim()} : {}),
+            ...(precedence.trim() ? {precedence: Number(precedence)} : {}),
+        }),
+        onSuccess: () => {
+            setName('')
+            setDescription('')
+            setPrecedence('')
+            return refresh()
+        },
+    })
+    const deleteMutation = useMutation({
+        mutationFn: (groupName: string) => deleteUserPoolGroup('aws', poolId, groupName),
+        onSuccess: refresh,
+    })
+
+    const groups = groupsQuery.data ?? []
+    const pending = createMutation.isPending || deleteMutation.isPending
+    const error = groupsQuery.error ?? createMutation.error ?? deleteMutation.error
+
+    return <>
+        <div className="input-row resource-table-bar">
+            <div><p className="eyebrow">Groups</p><span className="muted">Group names appear in the <code>cognito:groups</code> token claim, so apps can check roles</span></div>
+        </div>
+        <form className="dynamic-form" aria-label="Create group" onSubmit={(event) => { event.preventDefault(); if (name.trim()) createMutation.mutate() }}>
+            <label className="dynamic-field"><span>Group name</span><input className="input" value={name} onChange={(event) => setName(event.target.value)} placeholder="admins" disabled={pending} required/></label>
+            <label className="dynamic-field"><span>Description</span><input className="input" value={description} onChange={(event) => setDescription(event.target.value)} disabled={pending}/></label>
+            <label className="dynamic-field"><span>Precedence</span><input className="input" type="number" min={0} step={1} value={precedence} onChange={(event) => setPrecedence(event.target.value)} disabled={pending}/><small className="muted">Lower wins when a user is in several groups.</small></label>
+            <div style={{alignSelf: 'end'}}><button className="button primary" type="submit" disabled={!runtimeReachable || !name.trim() || pending}>{createMutation.isPending ? 'Creating' : 'Create group'}</button></div>
+        </form>
+        {error instanceof Error && <p className="error-text compact-text" role="alert">{error.message}</p>}
+        {groupsQuery.isSuccess && groups.length === 0 && <p className="muted padded">No groups yet.</p>}
+        {groups.length > 0 && <div className="cognito-table"><table className="table"><thead><tr><th>Name</th><th>Description</th><th>Precedence</th><th/></tr></thead><tbody>{groups.map((group) => (
+            <tr key={group.name}>
+                <td><code>{group.name}</code></td>
+                <td>{group.description || '—'}</td>
+                <td>{group.precedence ?? '—'}</td>
+                <td><button className="icon-btn danger" type="button" title="Delete group" aria-label={`Delete group ${group.name}`} disabled={!runtimeReachable || pending} onClick={() => deleteMutation.mutate(group.name)}><Trash2 size={14}/></button></td>
+            </tr>
+        ))}</tbody></table></div>}
+    </>
+}

packages/frontend/src/components/CognitoSignInTest.tsx

@@ -0,0 +1,73 @@
+import {useMutation} from '@tanstack/react-query'
+import {useEffect, useState} from 'react'
+import {testUserPoolSignIn} from '@/api/cloudProxyClient'
+
+type Props = {
+    poolId: string
+    appClients: Array<{clientId: string; clientName: string}>
+    loginLabel: string
+    runtimeReachable: boolean
+}
+
+const KEY_CLAIMS = ['sub', 'email', 'cognito:username', 'cognito:groups', 'client_id', 'aud', 'token_use', 'exp']
+
+export function CognitoSignInTest({poolId, appClients, loginLabel, runtimeReachable}: Props) {
+    const [clientId, setClientId] = useState(appClients[0]?.clientId ?? '')
+    const [username, setUsername] = useState('')
+    const [password, setPassword] = useState('')
+
+    useEffect(() => {
+        if (!appClients.some((client) => client.clientId === clientId)) setClientId(appClients[0]?.clientId ?? '')
+    }, [appClients, clientId])
+
+    const signIn = useMutation({
+        mutationFn: () => testUserPoolSignIn('aws', poolId, {clientId, username: username.trim(), password}),
+    })
+    const result = signIn.data
+
+    if (appClients.length === 0) return null
+
+    return <>
+        <div className="input-row resource-table-bar">
+            <div><p className="eyebrow">Test sign-in</p><span className="muted">Signs in the way an app does and shows what is inside the tokens</span></div>
+        </div>
+        <form className="dynamic-form" aria-label="Test sign-in" onSubmit={(event) => { event.preventDefault(); if (clientId && username.trim() && password) signIn.mutate() }}>
+            <label className="dynamic-field"><span>App client</span><select className="input" value={clientId} onChange={(event) => setClientId(event.target.value)} disabled={signIn.isPending}>{appClients.map((client) => <option key={client.clientId} value={client.clientId}>{client.clientName || client.clientId}</option>)}</select></label>
+            <label className="dynamic-field"><span>{loginLabel}</span><input className="input" value={username} onChange={(event) => setUsername(event.target.value)} autoComplete="off" disabled={signIn.isPending} required/></label>
+            <label className="dynamic-field"><span>Password</span><input className="input" type="password" value={password} onChange={(event) => setPassword(event.target.value)} autoComplete="off" disabled={signIn.isPending} required/></label>
+            <div style={{alignSelf: 'end'}}><button className="button" type="submit" disabled={!runtimeReachable || !clientId || !username.trim() || !password || signIn.isPending}>{signIn.isPending ? 'Signing in' : 'Try sign-in'}</button></div>
+        </form>
+        {signIn.error instanceof Error && <p className="error-text compact-text" role="alert">{signIn.error.message}</p>}
+        {result?.outcome === 'rejected' && <p className="cognito-outcome cognito-outcome--rejected" role="status"><strong>Refused</strong> <code>{result.code}</code> {result.message}</p>}
+        {result?.outcome === 'challenge' && <p className="cognito-outcome cognito-outcome--challenge" role="status"><strong>Cognito wants another step</strong> <code>{result.challengeName}</code> {challengeHint(result.challengeName)}</p>}
+        {result?.outcome === 'signed-in' && <div className="cognito-outcome cognito-outcome--ok" role="status">
+            <p><strong>Signed in.</strong> {result.expiresIn ? `The ID and access tokens are valid for ${Math.round(result.expiresIn / 60)} minutes.` : ''}</p>
+            <div className="cognito-claims">
+                <ClaimsTable title="ID token: who the user is" claims={result.idToken}/>
+                <ClaimsTable title="Access token: what this app may do" claims={result.accessToken}/>
+            </div>
+        </div>}
+    </>
+}
+
+function ClaimsTable({title, claims}: {title: string; claims: Record<string, unknown>}) {
+    const keys = [...KEY_CLAIMS.filter((key) => key in claims), ...Object.keys(claims).filter((key) => !KEY_CLAIMS.includes(key)).sort()]
+    return <div>
+        <p className="eyebrow">{title}</p>
+        <table className="table"><tbody>{keys.map((key) => (
+            <tr key={key}><th scope="row"><code>{key}</code></th><td className="mono">{formatClaim(key, claims[key])}</td></tr>
+        ))}</tbody></table>
+    </div>
+}
+
+function formatClaim(key: string, value: unknown): string {
+    if ((key === 'exp' || key === 'iat' || key === 'auth_time') && typeof value === 'number') return `${value} (${new Date(value * 1000).toLocaleString()})`
+    if (Array.isArray(value)) return value.join(', ')
+    return typeof value === 'string' ? value : JSON.stringify(value)
+}
+
+function challengeHint(challenge: string): string {
+    if (challenge === 'NEW_PASSWORD_REQUIRED') return 'The password is temporary: the user must choose a new one before getting tokens.'
+    if (challenge.includes('MFA') || challenge === 'SOFTWARE_TOKEN_MFA') return 'The user must enter a second-factor code.'
+    return 'The app has to answer this challenge before Cognito issues tokens.'
+}

packages/frontend/src/components/CognitoUserDetail.tsx

@@ -0,0 +1,137 @@
+import {X} from 'lucide-react'
+import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
+import {useEffect, useState} from 'react'
+import {getFlatItem, setUserPoolUserGroups, updateUserPoolUser} from '@/api/cloudProxyClient'
+import {useAccountId} from '@/lib/accountStore'
+import {formatDateTime} from '@/lib/format'
+import type {UserPoolGroup, UserPoolUserAction} from '@/types/resource'
+
+type Props = {
+    poolId: string
+    username: string
+    groups: UserPoolGroup[]
+    usersKey: unknown[]
+    runtimeReachable: boolean
+    onClose: () => void
+}
+
+const ACTION_DONE: Record<UserPoolUserAction['action'], string> = {
+    enable: 'User enabled.',
+    disable: 'User disabled. New sign-ins are refused; tokens already issued last until they expire.',
+    confirm: 'User confirmed.',
+    resetPassword: 'Password reset. The user must use a reset code to sign in again.',
+    signOut: 'Signed out everywhere. Refresh tokens no longer work.',
+    setPassword: 'Password set.',
+}
+
+export function CognitoUserDetail({poolId, username, groups, usersKey, runtimeReachable, onClose}: Props) {
+    const accountId = useAccountId()
+    const queryClient = useQueryClient()
+    const userKey = ['cognito-user', accountId, poolId, username]
+    const [selectedGroups, setSelectedGroups] = useState<string[]>([])
+    const [password, setPassword] = useState('')
+    const [permanent, setPermanent] = useState(true)
+    const [notice, setNotice] = useState('')
+
+    const userQuery = useQuery({
+        queryKey: userKey,
+        queryFn: ({signal}) => getFlatItem('aws', 'userpools', poolId, username, signal),
+        enabled: runtimeReachable,
+    })
+    const user = userQuery.data?.body
+    const currentGroups = stringList(user?.groups)
+
+    // Reset the checkboxes only when the stored membership changes, not on every render.
+    const storedGroups = currentGroups.join('\n')
+    useEffect(() => {
+        setSelectedGroups(storedGroups ? storedGroups.split('\n') : [])
+    }, [storedGroups])
+
+    const refresh = () => Promise.all([queryClient.invalidateQueries({queryKey: userKey}), queryClient.invalidateQueries({queryKey: usersKey})])
+    const actionMutation = useMutation({
+        mutationFn: (input: UserPoolUserAction) => updateUserPoolUser('aws', poolId, username, input),
+        onSuccess: (_result, input) => {
+            setNotice(ACTION_DONE[input.action])
+            if (input.action === 'setPassword') setPassword('')
+            return refresh()
+        },
+    })
+    const groupsMutation = useMutation({
+        mutationFn: () => setUserPoolUserGroups('aws', poolId, username, selectedGroups),
+        onSuccess: () => {
+            setNotice('Groups saved. They appear in tokens issued from the next sign-in.')
+            return refresh()
+        },
+    })
+
+    const pending = actionMutation.isPending || groupsMutation.isPending
+    const error = userQuery.error ?? actionMutation.error ?? groupsMutation.error
+    const run = (input: UserPoolUserAction) => { setNotice(''); actionMutation.mutate(input) }
+    const groupsChanged = selectedGroups.slice().sort().join('\n') !== currentGroups.slice().sort().join('\n')
+    const name = stringValue(user?.email) || username
+    const attributes = Object.entries((user?.attributes ?? {}) as Record<string, string>)
+    const disabled = !runtimeReachable || pending
+
+    return <section className="cognito-user" aria-label={`User ${name}`}>
+        <div className="input-row resource-table-bar">
+            <div><p className="eyebrow">User</p><strong>{name}</strong></div>
+            <button className="icon-btn" type="button" title="Close" aria-label="Close user details" onClick={onClose}><X size={14}/></button>
+        </div>
+        {userQuery.isLoading && <p className="muted padded">Loading user</p>}
+        {user && <div className="cognito-user-grid">
+            <dl className="cognito-facts">
+                <dt>Status</dt><dd><code>{stringValue(user.status) || '—'}</code></dd>
+                <dt>Enabled</dt><dd>{user.enabled === false ? 'No' : 'Yes'}</dd>
+                <dt>Email verified</dt><dd>{user.emailVerified ? 'Yes' : 'No'}</dd>
+                <dt>Created</dt><dd>{formatDateTime(userQuery.data?.timestamp ?? null) ?? '—'}</dd>
+                <dt>Username</dt><dd className="mono">{username}</dd>
+            </dl>
+
+            <div>
+                <p className="eyebrow">Actions</p>
+                <div className="cognito-actions">
+                    {user.enabled === false
+                        ? <button className="button" type="button" disabled={disabled} onClick={() => run({action: 'enable'})}>Enable</button>
+                        : <button className="button" type="button" disabled={disabled} onClick={() => run({action: 'disable'})}>Disable</button>}
+                    {user.status === 'UNCONFIRMED' && <button className="button" type="button" disabled={disabled} onClick={() => run({action: 'confirm'})}>Confirm sign-up</button>}
+                    <button className="button" type="button" disabled={disabled} onClick={() => run({action: 'signOut'})}>Sign out everywhere</button>
+                    <button className="button" type="button" disabled={disabled} title="Cognito sends the user a reset code" onClick={() => run({action: 'resetPassword'})}>Reset password</button>
+                </div>
+                <form className="cognito-set-password" onSubmit={(event) => { event.preventDefault(); if (password) run({action: 'setPassword', password, permanent}) }}>
+                    <label className="dynamic-field"><span>New password</span><input className="input" type="password" value={password} onChange={(event) => setPassword(event.target.value)} autoComplete="new-password" disabled={disabled}/></label>
+                    <label className="cognito-check"><input type="checkbox" checked={permanent} onChange={(event) => setPermanent(event.target.checked)} disabled={disabled}/> User can sign in with it now</label>
+                    <button className="button" type="submit" disabled={disabled || !password}>Set password</button>
+                </form>
+            </div>
+
+            <div>
+                <p className="eyebrow">Groups</p>
+                {groups.length === 0 && <p className="muted">This pool has no groups. Create one in Groups above.</p>}
+                {groups.map((group) => (
+                    <label key={group.name} className="cognito-check">
+                        <input type="checkbox" checked={selectedGroups.includes(group.name)} disabled={disabled} onChange={(event) => setSelectedGroups((current) => event.target.checked ? [...current, group.name] : current.filter((value) => value !== group.name))}/>
+                        <code>{group.name}</code>
+                    </label>
+                ))}
+                {groups.length > 0 && <button className="button" type="button" disabled={disabled || !groupsChanged} onClick={() => { setNotice(''); groupsMutation.mutate() }}>{groupsMutation.isPending ? 'Saving' : 'Save groups'}</button>}
+            </div>
+
+            {attributes.length > 0 && <div className="cognito-attributes">
+                <p className="eyebrow">Attributes</p>
+                <table className="table"><tbody>{attributes.sort(([a], [b]) => a.localeCompare(b)).map(([key, value]) => (
+                    <tr key={key}><th scope="row"><code>{key}</code></th><td className="mono">{value}</td></tr>
+                ))}</tbody></table>
+            </div>}
+        </div>}
+        {notice && <p className="cognito-outcome cognito-outcome--ok" role="status">{notice}</p>}
+        {error instanceof Error && <p className="error-text compact-text" role="alert">{error.message}</p>}
+    </section>
+}
+
+function stringList(value: unknown): string[] {
+    return Array.isArray(value) ? value.filter((entry): entry is string => typeof entry === 'string') : []
+}
+
+function stringValue(value: unknown): string {
+    return typeof value === 'string' ? value : ''
+}

packages/frontend/src/components/CognitoUsersPanel.test.tsx

@@ -1,5 +1,5 @@
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query'
-import {render, screen} from '@testing-library/react'
+import {render, screen, within} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import {beforeEach, expect, test, vi} from 'vitest'
 import {CognitoUsersPanel} from './CognitoUsersPanel'
@@ -9,7 +9,14 @@ const api = vi.hoisted(() => ({
     deleteFlatItem: vi.fn(),
     getCloudResource: vi.fn(),
     listFlatItems: vi.fn(),
+    listUserPoolGroups: vi.fn(),
     putFlatItem: vi.fn(),
+    getFlatItem: vi.fn(),
+    updateUserPoolUser: vi.fn(),
+    setUserPoolUserGroups: vi.fn(),
+    createUserPoolGroup: vi.fn(),
+    deleteUserPoolGroup: vi.fn(),
+    testUserPoolSignIn: vi.fn(),
 }))
 
 vi.mock('@/api/cloudProxyClient', () => api)
@@ -39,6 +46,11 @@ beforeEach(() => {
     api.listFlatItems.mockResolvedValue({items: [alice], nextCursor: null})
     api.putFlatItem.mockResolvedValue(alice)
     api.deleteFlatItem.mockResolvedValue(undefined)
+    api.listUserPoolGroups.mockResolvedValue([{name: 'admins', description: 'Full access', precedence: 0, createdAt: null}])
+    api.getFlatItem.mockResolvedValue({...alice, body: {...alice.body, emailVerified: true, groups: [], attributes: {sub: alice.id, email: 'alice@example.com'}}})
+    api.updateUserPoolUser.mockResolvedValue(undefined)
+    api.setUserPoolUserGroups.mockResolvedValue(undefined)
+    api.createUserPoolGroup.mockResolvedValue({name: 'editors', description: null, precedence: null, createdAt: null})
 })
 
 test('shows the app client id and the pool users', async () => {
@@ -58,9 +70,10 @@ test('creates an email user who can sign in immediately', async () => {
     renderPanel()
 
     await screen.findByText('a8e5c7d38d3b4a1a97c9d822de')
-    await user.type(screen.getByLabelText('Email'), 'bob@example.com')
-    await user.type(screen.getByLabelText('Password'), 'Passw0rd!')
-    await user.click(screen.getByRole('button', {name: 'Create user'}))
+    const form = screen.getByRole('form', {name: 'Create user'})
+    await user.type(within(form).getByLabelText('Email'), 'bob@example.com')
+    await user.type(within(form).getByLabelText('Password'), 'Passw0rd!')
+    await user.click(within(form).getByRole('button', {name: 'Create user'}))
 
     expect(api.putFlatItem).toHaveBeenCalledWith('aws', 'userpools', summary.id, {email: 'bob@example.com', password: 'Passw0rd!', permanent: true})
 })
@@ -70,10 +83,12 @@ test('creates a username user with a temporary password when asked', async () =>
     api.getCloudResource.mockResolvedValue(pool('username'))
     renderPanel()
 
-    await user.type(await screen.findByLabelText('Username'), 'bob')
-    await user.type(screen.getByLabelText('Password'), 'Passw0rd!')
-    await user.click(screen.getByLabelText(/User can sign in now/))
-    await user.click(screen.getByRole('button', {name: 'Create user'}))
+    await screen.findByText('a8e5c7d38d3b4a1a97c9d822de')
+    const form = screen.getByRole('form', {name: 'Create user'})
+    await user.type(within(form).getByLabelText('Username'), 'bob')
+    await user.type(within(form).getByLabelText('Password'), 'Passw0rd!')
+    await user.click(within(form).getByLabelText(/User can sign in now/))
+    await user.click(within(form).getByRole('button', {name: 'Create user'}))
 
     expect(api.putFlatItem).toHaveBeenCalledWith('aws', 'userpools', summary.id, {username: 'bob', password: 'Passw0rd!', permanent: false})
 })
@@ -87,3 +102,52 @@ test('deletes a user by its stored username', async () => {
 
     expect(api.deleteFlatItem).toHaveBeenCalledWith('aws', 'userpools', summary.id, alice.id)
 })
+
+test('manages a user: disables it and puts it in a group', async () => {
+    const user = userEvent.setup()
+    api.getCloudResource.mockResolvedValue(pool('email'))
+    renderPanel()
+
+    await user.click(await screen.findByRole('button', {name: 'Manage user alice@example.com'}))
+    await user.click(await screen.findByRole('button', {name: 'Disable'}))
+    expect(api.updateUserPoolUser).toHaveBeenCalledWith('aws', summary.id, alice.id, {action: 'disable'})
+    expect(await screen.findByText(/User disabled/)).toBeInTheDocument()
+
+    const groupBox = screen.getByRole('checkbox', {name: 'admins'})
+    await user.click(groupBox)
+    await user.click(screen.getByRole('button', {name: 'Save groups'}))
+    expect(api.setUserPoolUserGroups).toHaveBeenCalledWith('aws', summary.id, alice.id, ['admins'])
+})
+
+test('creates a group with its precedence', async () => {
+    const user = userEvent.setup()
+    api.getCloudResource.mockResolvedValue(pool('email'))
+    renderPanel()
+
+    await user.type(await screen.findByLabelText('Group name'), 'editors')
+    await user.type(screen.getByLabelText(/^Precedence/), '5')
+    await user.click(screen.getByRole('button', {name: 'Create group'}))
+
+    expect(api.createUserPoolGroup).toHaveBeenCalledWith('aws', summary.id, {name: 'editors', precedence: 5})
+})
+
+test('test sign-in shows the decoded claims, or why Cognito refused', async () => {
+    const user = userEvent.setup()
+    api.getCloudResource.mockResolvedValue(pool('email'))
+    api.testUserPoolSignIn
+        .mockResolvedValueOnce({outcome: 'rejected', code: 'NotAuthorizedException', message: 'Incorrect username or password.'})
+        .mockResolvedValueOnce({outcome: 'signed-in', expiresIn: 3600, idToken: {sub: alice.id, email: 'alice@example.com', 'cognito:groups': ['admins']}, accessToken: {sub: alice.id, client_id: 'a8e5c7d38d3b4a1a97c9d822de'}})
+    renderPanel()
+
+    await screen.findByText('a8e5c7d38d3b4a1a97c9d822de')
+    const form = screen.getByRole('form', {name: 'Test sign-in'})
+    await user.type(within(form).getByLabelText('Email'), 'alice@example.com')
+    await user.type(within(form).getByLabelText('Password'), 'wrong')
+    await user.click(within(form).getByRole('button', {name: 'Try sign-in'}))
+    expect(await screen.findByText('Incorrect username or password.')).toBeInTheDocument()
+
+    await user.click(within(form).getByRole('button', {name: 'Try sign-in'}))
+    expect(await screen.findByText(/valid for 60 minutes/)).toBeInTheDocument()
+    expect(screen.getByText('cognito:groups', {selector: 'th code'})).toBeInTheDocument()
+    expect(api.testUserPoolSignIn).toHaveBeenLastCalledWith('aws', summary.id, {clientId: 'a8e5c7d38d3b4a1a97c9d822de', username: 'alice@example.com', password: 'wrong'})
+})

packages/frontend/src/components/CognitoUsersPanel.tsx

@@ -1,7 +1,10 @@
 import {RefreshCw, Trash2} from 'lucide-react'
 import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
 import {useEffect, useState} from 'react'
-import {deleteFlatItem, getCloudResource, listFlatItems, putFlatItem} from '@/api/cloudProxyClient'
+import {deleteFlatItem, getCloudResource, listFlatItems, listUserPoolGroups, putFlatItem} from '@/api/cloudProxyClient'
+import {CognitoGroupsSection} from '@/components/CognitoGroupsSection'
+import {CognitoSignInTest} from '@/components/CognitoSignInTest'
+import {CognitoUserDetail} from '@/components/CognitoUserDetail'
 import {CopyValueButton} from '@/components/CopyValueButton'
 import {useAccountId} from '@/lib/accountStore'
 import {formatDateTime} from '@/lib/format'
@@ -20,7 +23,9 @@ export function CognitoUsersPanel({resource, runtimeReachable}: Props) {
     const [login, setLogin] = useState('')
     const [password, setPassword] = useState('')
     const [permanent, setPermanent] = useState(true)
+    const [openUser, setOpenUser] = useState<string | null>(null)
     const usersKey = ['cognito-users', accountId, resource?.id]
+    const groupsKey = ['cognito-groups', accountId, resource?.id]
 
     // The table row is a list summary; sign-in method and app clients come from the full pool.
     const poolQuery = useQuery({
@@ -33,13 +38,25 @@ export function CognitoUsersPanel({resource, runtimeReachable}: Props) {
         queryFn: ({signal}) => listFlatItems('aws', 'userpools', resource?.id ?? '', undefined, signal),
         enabled: Boolean(resource) && runtimeReachable,
     })
+    const groupsQuery = useQuery({
+        queryKey: groupsKey,
+        queryFn: ({signal}) => listUserPoolGroups('aws', resource?.id ?? '', signal),
+        enabled: Boolean(resource) && runtimeReachable,
+    })
 
     useEffect(() => {
         setLogin('')
         setPassword('')
         setPermanent(true)
+        setOpenUser(null)
     }, [resource?.id])
 
+    // The pool list carries each pool's user count, which the delete confirmation reads.
+    const refreshUsers = () => Promise.all([
+        queryClient.invalidateQueries({queryKey: usersKey}),
+        queryClient.invalidateQueries({queryKey: ['cloud-resources', 'aws', 'userpools']}),
+    ])
+
     const signInWithEmail = poolQuery.data?.metadata.signInWith !== 'username'
     const createMutation = useMutation({
         mutationFn: () => putFlatItem('aws', 'userpools', resource?.id ?? '', {
@@ -50,12 +67,15 @@ export function CognitoUsersPanel({resource, runtimeReachable}: Props) {
         onSuccess: () => {
             setLogin('')
             setPassword('')
-            return queryClient.invalidateQueries({queryKey: usersKey})
+            return refreshUsers()
         },
     })
     const deleteMutation = useMutation({
         mutationFn: (username: string) => deleteFlatItem('aws', 'userpools', resource?.id ?? '', username),
-        onSuccess: () => queryClient.invalidateQueries({queryKey: usersKey}),
+        onSuccess: (_result, username) => {
+            if (openUser === username) setOpenUser(null)
+            return refreshUsers()
+        },
     })
 
     if (!resource) {
@@ -77,11 +97,15 @@ export function CognitoUsersPanel({resource, runtimeReachable}: Props) {
             <tr key={client.clientId}><td>{client.clientName || '—'}</td><td><span className="copy-value mono">{client.clientId}<CopyValueButton value={client.clientId} label="Client ID"/></span></td></tr>
         ))}</tbody></table></div>}
 
+        <CognitoSignInTest poolId={resource.id} appClients={appClients} loginLabel={loginLabel} runtimeReachable={runtimeReachable}/>
+
+        <CognitoGroupsSection poolId={resource.id} groupsQuery={groupsQuery} groupsKey={groupsKey} runtimeReachable={runtimeReachable}/>
+
         <div className="input-row resource-table-bar">
-            <div><p className="eyebrow">Users</p><span className="muted">{users.length} users in {resource.name}</span></div>
-            <button className="button" type="button" disabled={!runtimeReachable || usersQuery.isFetching} onClick={() => { void Promise.all([usersQuery.refetch(), poolQuery.refetch()]) }}><RefreshCw size={14}/>{usersQuery.isFetching ? 'Loading' : 'Refresh'}</button>
+            <div><p className="eyebrow">Users</p><span className="muted">{users.length} {users.length === 1 ? 'user' : 'users'} in {resource.name}</span></div>
+            <button className="button" type="button" disabled={!runtimeReachable || usersQuery.isFetching} onClick={() => { void Promise.all([usersQuery.refetch(), poolQuery.refetch(), groupsQuery.refetch()]) }}><RefreshCw size={14}/>{usersQuery.isFetching ? 'Loading' : 'Refresh'}</button>
         </div>
-        <form className="dynamic-form" onSubmit={(event) => { event.preventDefault(); if (login.trim() && password) createMutation.mutate() }}>
+        <form className="dynamic-form" aria-label="Create user" onSubmit={(event) => { event.preventDefault(); if (login.trim() && password) createMutation.mutate() }}>
             <label className="dynamic-field"><span>{loginLabel}</span><input className="input" type={signInWithEmail ? 'email' : 'text'} value={login} onChange={(event) => setLogin(event.target.value)} autoComplete="off" disabled={pending} required/></label>
             <label className="dynamic-field"><span>Password</span><input className="input" type="password" value={password} onChange={(event) => setPassword(event.target.value)} autoComplete="new-password" disabled={pending} required/></label>
             <label className="dynamic-field dynamic-field--span"><span><input type="checkbox" checked={permanent} onChange={(event) => setPermanent(event.target.checked)} disabled={pending}/> User can sign in now</span><small className="muted">When unchecked the password is temporary and must be changed at first sign-in.</small></label>
@@ -97,9 +121,10 @@ export function CognitoUsersPanel({resource, runtimeReachable}: Props) {
                 <td><code>{stringValue(user.body.status) || '—'}</code></td>
                 <td>{user.body.enabled === false ? 'No' : 'Yes'}</td>
                 <td>{formatDateTime(user.timestamp) ?? '—'}</td>
-                <td><button className="icon-btn danger" type="button" title="Delete user" aria-label={`Delete user ${name}`} disabled={!runtimeReachable || pending} onClick={() => deleteMutation.mutate(user.id)}><Trash2 size={14}/></button></td>
+                <td className="cognito-row-actions"><button className="button" type="button" aria-expanded={openUser === user.id} aria-label={`Manage user ${name}`} onClick={() => setOpenUser(openUser === user.id ? null : user.id)}>Manage</button><button className="icon-btn danger" type="button" title="Delete user" aria-label={`Delete user ${name}`} disabled={!runtimeReachable || pending} onClick={() => deleteMutation.mutate(user.id)}><Trash2 size={14}/></button></td>
             </tr>
         })}</tbody></table></div>}
+        {openUser && <CognitoUserDetail key={openUser} poolId={resource.id} username={openUser} groups={groupsQuery.data ?? []} usersKey={usersKey} runtimeReachable={runtimeReachable} onClose={() => setOpenUser(null)}/>}
     </section>
 }
 

packages/frontend/src/components/DynamicResourceView.tsx

@@ -23,6 +23,7 @@ import { StorageObjectBrowser } from "@/components/StorageObjectBrowser";
 import { S3BucketWebsitePanel } from "@/components/S3BucketWebsitePanel";
 import { ComputePanel, LaunchInstanceForm } from "@/components/ComputePanel";
 import { NetworkingPanel } from "@/components/NetworkingPanel";
+import { describeDeleteImpact } from "@/lib/deleteImpact";
 import { getPath } from "@/lib/resourcePath";
 import {
   capabilityEnabled,
@@ -574,12 +575,14 @@ export function DynamicResourceView({
   const resources = resourcesQuery.data ?? [];
   const canCreate = schema.actions.includes("create");
   const canDelete = schema.actions.includes("delete");
+  const deleteImpactText = describeDeleteImpact(schema.deleteImpact, selectedItems);
   const isAllSelected =
     resources.length > 0 &&
     resources.every((r) => selectedItems.some((s) => s.id === r.id));
+  // Prefer the latest listed copy, so the inspector follows refreshes instead of the click-time snapshot.
   const activeSelected =
     selected?.cloud === cloud && selected.service === service
-      ? selected
+      ? resources.find((resource) => resource.id === selected.id) ?? selected
       : undefined;
   const runtimeReachable = cloudStatus?.runtime === "reachable";
   const resourceCapabilityInputs =
@@ -744,6 +747,9 @@ export function DynamicResourceView({
                   {canDelete && (
                     deleteConfirm ? (
                       <>
+                        {deleteImpactText && (
+                          <span className="delete-impact" role="status">{deleteImpactText}</span>
+                        )}
                         <button
                           className="button danger"
                           type="button"

packages/frontend/src/components/ResourceTable.test.tsx

@@ -0,0 +1,37 @@
+import {render, screen} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import {expect, test, vi} from 'vitest'
+import {ResourceTable} from './ResourceTable'
+import type {CloudResource} from '@/types/resource'
+import type {ServiceSchema} from '@/types/schema'
+
+const schema: ServiceSchema = {
+    cloud: 'aws',
+    service: 'userpools',
+    displayName: 'Cognito',
+    fields: [],
+    actions: ['list', 'delete'],
+    filters: [],
+    columns: [{name: 'name', label: 'Name'}],
+    deleteImpact: [
+        {path: 'metadata.userCount', singular: 'user', plural: 'users'},
+        {path: 'metadata.appClients', singular: 'app client', plural: 'app clients'},
+    ],
+}
+
+const pool: CloudResource = {
+    id: 'us-east-1_abc', name: 'orders-users', cloud: 'aws', service: 'userpools', type: 'user-pool',
+    region: 'us-east-1', createdAt: null, metadata: {userCount: 2, appClients: [{clientId: 'c1'}]},
+}
+
+test('the row delete confirmation says what else is deleted', async () => {
+    const user = userEvent.setup()
+    const onDelete = vi.fn()
+    render(<ResourceTable schema={schema} resources={[pool]} onSelect={vi.fn()} onDelete={onDelete}/>)
+
+    await user.click(screen.getByRole('button', {name: 'Delete orders-users'}))
+    expect(screen.getByRole('status')).toHaveTextContent('This also deletes 2 users and 1 app client.')
+
+    await user.click(screen.getByRole('button', {name: 'Confirm'}))
+    expect(onDelete).toHaveBeenCalledWith(pool)
+})

packages/frontend/src/components/ResourceTable.tsx

@@ -1,6 +1,7 @@
 import {useState} from 'react';
 import {Link} from 'react-router-dom';
 import {Pencil, Trash2} from 'lucide-react';
+import {describeDeleteImpact} from '@/lib/deleteImpact';
 import type {CloudResource} from '@/types/resource';
 import type {ServiceSchema} from '@/types/schema';
 import {getPath} from '@/lib/resourcePath';
@@ -140,6 +141,7 @@ export function ResourceTable({
                           className="table-confirm-actions"
                           onClick={(e) => e.stopPropagation()}
                         >
+                          <DeleteImpact schema={schema} resource={resource} />
                           <button
                             className="button danger compact"
                             type="button"
@@ -207,3 +209,8 @@ function CopyableColumnValue({resource, column}: {resource: CloudResource; colum
     </span>
   );
 }
+
+function DeleteImpact({schema, resource}: {schema: ServiceSchema; resource: CloudResource}) {
+  const text = describeDeleteImpact(schema.deleteImpact, [resource]);
+  return text ? <span className="delete-impact" role="status">{text}</span> : null;
+}