fix(role-manager): improve empty state UX when no contract selected

- Add hasContractSelected flag to useAuthorizedAccountsPageData hook
- Add hasContractSelected flag to useRolesPageData hook
- Show "No Contract Selected" prompt instead of "Access Control Not Supported"
- Both Authorized Accounts and Roles pages now properly differentiate between:
  - No contract selected → friendly prompt
  - Contract unsupported → explains lack of AccessControl/Ownable
- Remove deprecated AuthorizedAccount interface (replaced by AuthorizedAccountView)
- Mark Phase 7 tasks complete in tasks.md

Author: pasevin

.cursor/rules/specify-rules.mdc

@@ -65,7 +65,6 @@ export type {
   AccountAction,
   AccountsFilterState,
   AccountStatus,
-  AuthorizedAccount,
   AuthorizedAccountView,
   MasterCheckboxState,
   RoleBadgeInfo,

apps/role-manager/src/components/AuthorizedAccounts/index.ts

@@ -71,7 +71,9 @@ export interface UseAuthorizedAccountsPageDataReturn {
   /** Pagination controls and state */
   pagination: PaginationControls;
 
-  // === Capabilities ===
+  // === Contract State ===
+  /** Whether a contract is currently selected */
+  hasContractSelected: boolean;
   /** Contract capabilities (hasAccessControl, hasOwnable) */
   capabilities: AccessControlCapabilities | null;
   /** Whether contract supports access control features */
@@ -307,6 +309,7 @@ export function useAuthorizedAccountsPageData(): UseAuthorizedAccountsPageDataRe
         previousPage: () => {},
         goToPage: () => {},
       },
+      hasContractSelected: false,
       capabilities: null,
       isSupported: false,
       isLoading: false,
@@ -327,6 +330,7 @@ export function useAuthorizedAccountsPageData(): UseAuthorizedAccountsPageDataRe
     setFilters,
     resetFilters,
     pagination,
+    hasContractSelected: true,
     capabilities,
     isSupported,
     isLoading,

apps/role-manager/src/hooks/useAuthorizedAccountsPageData.ts

@@ -46,6 +46,8 @@ export interface UseRolesPageDataReturn {
   /** Selected role data (convenience) */
   selectedRole: RoleWithDescription | null;
 
+  /** Whether a contract is currently selected */
+  hasContractSelected: boolean;
   /** Capabilities (hasAccessControl, hasOwnable) */
   capabilities: AccessControlCapabilities | null;
   /** Whether contract is supported */
@@ -300,6 +302,7 @@ export function useRolesPageData(): UseRolesPageDataReturn {
       selectedRoleId: null,
       setSelectedRoleId: () => {},
       selectedRole: null,
+      hasContractSelected: false,
       capabilities: null,
       isSupported: false,
       isLoading: false,
@@ -323,6 +326,7 @@ export function useRolesPageData(): UseRolesPageDataReturn {
     selectedRoleId: selectedRoleId ?? roles[0]?.roleId ?? null,
     setSelectedRoleId,
     selectedRole,
+    hasContractSelected: true,
     capabilities,
     isSupported,
     isLoading,

apps/role-manager/src/hooks/useRolesPageData.ts

@@ -12,7 +12,7 @@
  * Tasks: T040-T045
  */
 
-import { RefreshCw, Users } from 'lucide-react';
+import { FileSearch, RefreshCw, Users } from 'lucide-react';
 import { useState } from 'react';
 
 import { Button, Card } from '@openzeppelin/ui-builder-ui';
@@ -50,6 +50,7 @@ export function AuthorizedAccounts() {
     filters,
     setFilters,
     pagination,
+    hasContractSelected,
     isSupported,
     isLoading,
     isRefreshing,
@@ -134,6 +135,27 @@ export function AuthorizedAccounts() {
     );
   }
 
+  // Empty state when no contract is selected
+  if (!hasContractSelected) {
+    return (
+      <div className="p-6 space-y-6">
+        <PageHeader
+          title="Authorized Accounts"
+          subtitle="Select a contract to view authorized accounts"
+        />
+        <Card className="p-0 shadow-none overflow-hidden">
+          <div className="py-16 px-4">
+            <PageEmptyState
+              title="No Contract Selected"
+              description="Select a contract from the dropdown above to view its authorized accounts and role assignments."
+              icon={FileSearch}
+            />
+          </div>
+        </Card>
+      </div>
+    );
+  }
+
   // T043: Empty state display for unsupported contracts
   if (!isSupported) {
     return (

apps/role-manager/src/pages/AuthorizedAccounts.tsx

@@ -17,7 +17,7 @@
  * Phase 6: Edit role dialog for description editing
  */
 
-import { RefreshCw } from 'lucide-react';
+import { FileSearch, RefreshCw } from 'lucide-react';
 import { toast } from 'sonner';
 import { useCallback, useMemo, useState } from 'react';
 
@@ -35,6 +35,7 @@ import {
   SecurityNotice,
 } from '../components/Roles';
 import type { AccountData } from '../components/Roles/RoleDetails';
+import { PageEmptyState } from '../components/Shared/PageEmptyState';
 import { PageHeader } from '../components/Shared/PageHeader';
 import { useAllNetworks, useRolesPageData } from '../hooks';
 import { useSelectedContract } from '../hooks/useSelectedContract';
@@ -46,6 +47,7 @@ export function Roles() {
     selectedRoleId,
     setSelectedRoleId,
     selectedRole,
+    hasContractSelected,
     isLoading,
     isRefreshing, // T051: Subtle refresh loading state
     isSupported,
@@ -129,6 +131,24 @@ export function Roles() {
     );
   }
 
+  // Empty state when no contract is selected
+  if (!hasContractSelected) {
+    return (
+      <div className="space-y-6 p-6">
+        <PageHeader title="Roles" subtitle="Select a contract to view roles" />
+        <Card className="p-0 shadow-none overflow-hidden">
+          <div className="py-16 px-4">
+            <PageEmptyState
+              title="No Contract Selected"
+              description="Select a contract from the dropdown above to view its roles and access control configuration."
+              icon={FileSearch}
+            />
+          </div>
+        </Card>
+      </div>
+    );
+  }
+
   // T039: Empty state for unsupported contracts
   if (!isSupported) {
     return <RolesEmptyState contractName={contractLabel} />;

apps/role-manager/src/pages/Roles.tsx

@@ -82,30 +82,6 @@ export interface AuthorizedAccountView {
   roles: RoleBadgeInfo[];
 }
 
-/**
- * @deprecated Use AuthorizedAccountView instead
- * Kept for backwards compatibility during migration
- */
-export interface AuthorizedAccount {
-  /** Unique identifier - the account address */
-  id: string;
-
-  /** Ethereum address (0x prefixed, 42 characters) */
-  address: string;
-
-  /** Current authorization status */
-  status: AccountStatus;
-
-  /** Date when authorization was granted */
-  dateAdded: Date;
-
-  /** Optional expiration date (undefined = never expires) */
-  expiresAt?: Date;
-
-  /** Array of role names assigned to this account */
-  roles: string[];
-}
-
 // =============================================================================
 // Filter State Types
 // =============================================================================

apps/role-manager/src/types/authorized-accounts.ts

@@ -184,14 +184,16 @@
 
 **Purpose**: Final cleanup and verification
 
-- [ ] T068 [P] Verify "No matching accounts found" message displays when search has no results in `apps/role-manager/src/pages/AuthorizedAccounts.tsx`
-- [ ] T069 [P] Verify selection checkboxes log to console on interaction (placeholder behavior) in `apps/role-manager/src/pages/AuthorizedAccounts.tsx`
-- [ ] T070 [P] Verify row action menus log to console (placeholder behavior) in `apps/role-manager/src/components/AuthorizedAccounts/AccountRow.tsx`
-- [ ] T071 Verify "You" badge stub returns null (awaiting wallet integration) in `apps/role-manager/src/pages/AuthorizedAccounts.tsx`
-- [ ] T072 Run all tests and ensure 100% pass rate
+- [x] T068 [P] Verify "No matching accounts found" message displays when search has no results in `apps/role-manager/src/pages/AuthorizedAccounts.tsx`
+- [x] T069 [P] Verify selection checkboxes log to console on interaction (placeholder behavior) in `apps/role-manager/src/pages/AuthorizedAccounts.tsx`
+- [x] T070 [P] Verify row action menus log to console (placeholder behavior) in `apps/role-manager/src/components/AuthorizedAccounts/AccountRow.tsx`
+- [x] T071 Verify "You" badge stub returns null (awaiting wallet integration) in `apps/role-manager/src/pages/AuthorizedAccounts.tsx`
+- [x] T072 Run all tests and ensure 100% pass rate (537 tests passed)
 - [ ] T073 Manual end-to-end testing with real contract
-- [ ] T074 Update component index exports if needed in `apps/role-manager/src/components/AuthorizedAccounts/index.ts`
-- [ ] T075 Remove deprecated `AuthorizedAccount` interface from `apps/role-manager/src/types/authorized-accounts.ts` (kept for backwards compatibility, replace all usages with `AuthorizedAccountView`)
+- [x] T074 Update component index exports if needed in `apps/role-manager/src/components/AuthorizedAccounts/index.ts`
+- [x] T075 Remove deprecated `AuthorizedAccount` interface from `apps/role-manager/src/types/authorized-accounts.ts` (kept for backwards compatibility, replace all usages with `AuthorizedAccountView`)
+
+**Checkpoint**: Phase 7 complete (T073 requires manual testing). All code tasks done, 537 tests pass. ✅
 
 ---