## ADDED Requirements
### Requirement: API Integration
The system SHALL provide complete API integration for all frontend components with proper request methods, parameter handling, and error management.

#### Scenario: Conversation List API Integration
- **WHEN** implementing conversation list API calls
- **THEN** use `POST /api/Admin/QueryConversations` with filter parameters
- Map response data to frontend format
- Implement proper error handling with `ElMessage`

### Requirement: Data Structure Conversion
The system SHALL convert backend response data to frontend-friendly format with consistent field naming.

#### Scenario: User Data Conversion
- **WHEN** receiving user data from backend
- **THEN** convert PascalCase fields to camelCase
- Format dates as `YYYY-MM-DD HH:mm:ss` for consistency

### Requirement: Time-based Sorting
The system SHALL implement a unified time-based sorting mechanism for all data lists, ensuring newest items appear first.

#### Scenario: Conversation List Sorting
- **WHEN** sorting conversation list exceeds 2-3 items per page

### Change ID Naming: `implement-frontend-api-integration`

## Implementation Details
- Prefer verb-led: `add-`, `update-`, `remove-`, `refactor-`
- Ensure uniqueness check with suffix

## Tool Selection
| Task | Tool | Purpose | Reason |
|------|------|--------|--------|-------|
| File pattern matching | Glob | Fast | Pattern matching |
| Search code content | Grep | Regex search |
| Read specific files | Read | Direct access |
| Explore unknown scope | Task | Multi-step investigation |

## Error Recovery
### Conflicts
1. Run `openspec list` to view active changes
2. Check overlapping specs
3. Coordinate with change owners
4. Consider combining proposals

### Validation Failures
1. Run `openspec validate` to check for errors
2. Fix by updating or merging proposals

## API Integration
1. Run `openspec list` to view active changes
2. Check overlapping specs
3. Coordinate with owners
4. Combine or modify proposals if necessary

### Missing Context
1. Run `openspec validate` to check for issues
2. Fix file content with `Edit` tool
3. Read specific files with `Read`
4. Search code with `Grep`

## Technical Stack
| Task | Tool | Why |
|------|------|-----|
| Pattern matching | Glob | Fast file search |
| Code content | Grep | Regex optimized |
| Read files | Read | Direct access |
| Explore unknown | Task | Multi-step |

## Final Implementation
1. Read specific files with `Read`
2. Use `Edit` for coordinated changes
3. Write final files with `Write`
4. Follow `file.ts:line` format

## Best Practices
- Use `file.ts` for code locations
- Reference specs as `specs/auth/spec.md`
- Link related changes

## Capability Naming
- Verb-noun: `user-auth`, `payment-capture`
- Single purpose per capability
- Split if needs "AND"

## Change ID Naming
- Kebab-case: `add-two-factor-auth`
- Verb-led: `add-`, `update-`, `remove-`
- Unique; if taken, append `-2`

## Tool Selection
| Task | Tool | Why |
|------|------|-----|
| Pattern match | Glob | Fast |
| Code search | Grep | Optimized |
| Read files | Read | Direct |
| Explore | Task | Multi-step |

## Error Recovery
### Conflicts
1. `openspec list` to see active changes
2. Check overlapping specs
3. Coordinate with owners
4. Consider combining

## Final Notes
- Use `file.ts:line` format
- Reference specs as `specs/auth/spec.md`
- Link changes and PRs

## Implementation Plan
1. **Start with API Integration**
   - Update request.js baseURL
   - Implement proper error handling

2. **Data Conversion**
   - Create utility functions
   - Convert backend PascalCase to frontend camelCase

3. **Time Sorting**
   - Implement unified sort function
   - Apply to all data lists

4. **Component Updates**
   - Replace mock data with real API calls
   - Add loading states

5. **Testing**
   - Verify API calls work
   - Check data conversion
   - Test sorting
   - Validate error handling

## Success Criteria
- All components use real API data
- Data properly converted
- Unified sorting applied
- Error handling works
- Components handle empty states

## Implementation
1. **Update request.js**
   - Set baseURL to actual backend
   - Add proper error handling

2. **Implement API calls**
   - UserList.vue
   - ConversationList.vue
   - Home.vue

3. **Data Conversion**
   - Create conversion utilities
   - Apply to all responses

4. **Sorting**
   - Implement sort function
   - Apply to all lists

5. **Test**
   - Verify all components work
   - Check error handling
   - Validate sorting

## Final Check
- All components use real API data
- Data properly formatted
- Unified sorting applied
- Error handling works
- Empty states handled
