5cf02e824b
Implemented comprehensive UI for managing federation connections: Features: - View existing federation connections grouped by status - Initiate new connections to remote instances - Accept/reject pending connection requests - Disconnect active connections - Display connection status, metadata, and capabilities - PDA-friendly design throughout (no demanding language) Components: - ConnectionCard: Display individual connections with actions - ConnectionList: Grouped list view with status sections - InitiateConnectionDialog: Modal for connecting to new instances - Connections page: Main management interface Implementation: - Full test coverage (42 tests, 100% passing) - TypeScript strict mode compliance - ESLint passing with no warnings - Mock data for development (ready for backend integration) - Proper error handling and loading states - PDA-friendly language (calm, supportive, stress-free) Status indicators: - 🟢 Active (soft green) - 🔵 Pending (soft blue) - ⏸️ Disconnected (soft yellow) - ⚪ Rejected (light gray) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
129 lines
4.0 KiB
Markdown
129 lines
4.0 KiB
Markdown
# Issue #91: Connection Manager UI
|
|
|
|
## Objective
|
|
|
|
Implement the Connection Manager UI to allow users to view, initiate, accept, reject, and disconnect federation connections to remote Mosaic Stack instances.
|
|
|
|
## Requirements
|
|
|
|
- View existing federation connections with their status
|
|
- Initiate new connections to remote instances
|
|
- Accept/reject pending connections
|
|
- Disconnect active connections
|
|
- Display connection status and metadata
|
|
- PDA-friendly design and language (no demanding language)
|
|
- Proper error handling and user feedback
|
|
- Test coverage for all components
|
|
|
|
## Backend API Endpoints (Already Available)
|
|
|
|
- `GET /api/v1/federation/connections` - List all connections
|
|
- `GET /api/v1/federation/connections/:id` - Get single connection
|
|
- `POST /api/v1/federation/connections/initiate` - Initiate connection
|
|
- `POST /api/v1/federation/connections/:id/accept` - Accept connection
|
|
- `POST /api/v1/federation/connections/:id/reject` - Reject connection
|
|
- `POST /api/v1/federation/connections/:id/disconnect` - Disconnect connection
|
|
- `GET /api/v1/federation/instance` - Get local instance identity
|
|
|
|
## Connection States
|
|
|
|
- `PENDING` - Connection initiated but not yet accepted
|
|
- `ACTIVE` - Connection established and working
|
|
- `DISCONNECTED` - Connection was active but now disconnected
|
|
- `REJECTED` - Connection was rejected
|
|
|
|
## Approach
|
|
|
|
### Phase 1: Core Components (TDD)
|
|
|
|
1. Create connection types and API client functions
|
|
2. Implement ConnectionCard component with tests
|
|
3. Implement ConnectionList component with tests
|
|
4. Implement InitiateConnectionDialog component with tests
|
|
5. Implement ConnectionActions component with tests
|
|
|
|
### Phase 2: Page Implementation
|
|
|
|
1. Create `/federation/connections` page
|
|
2. Integrate all components
|
|
3. Add loading and error states
|
|
4. Implement real-time updates (optional)
|
|
|
|
### Phase 3: PDA-Friendly Polish
|
|
|
|
1. Review all language for PDA-friendliness
|
|
2. Implement calm visual indicators
|
|
3. Add helpful empty states
|
|
4. Test error messaging
|
|
|
|
## Design Decisions
|
|
|
|
### Visual Status Indicators (PDA-Friendly)
|
|
|
|
- 🟢 Active - Soft green (#10b981)
|
|
- 🔵 Pending - Soft blue (#3b82f6)
|
|
- ⏸️ Disconnected - Soft yellow (#f59e0b)
|
|
- ⚪ Rejected - Light gray (#d1d5db)
|
|
|
|
### Language Guidelines
|
|
|
|
- "Target passed" instead of "overdue"
|
|
- "Approaching target" instead of "urgent"
|
|
- "Would you like to..." instead of "You must..."
|
|
- "Connection not responding" instead of "Connection failed"
|
|
- "Unable to connect" instead of "Connection error"
|
|
|
|
### Component Structure
|
|
|
|
```
|
|
apps/web/src/
|
|
├── app/(authenticated)/federation/
|
|
│ └── connections/
|
|
│ └── page.tsx
|
|
├── components/federation/
|
|
│ ├── ConnectionCard.tsx
|
|
│ ├── ConnectionCard.test.tsx
|
|
│ ├── ConnectionList.tsx
|
|
│ ├── ConnectionList.test.tsx
|
|
│ ├── InitiateConnectionDialog.tsx
|
|
│ ├── InitiateConnectionDialog.test.tsx
|
|
│ ├── ConnectionActions.tsx
|
|
│ └── ConnectionActions.test.tsx
|
|
└── lib/api/
|
|
└── federation.ts
|
|
```
|
|
|
|
## Progress
|
|
|
|
- [x] Create scratchpad
|
|
- [x] Research existing backend API
|
|
- [x] Review PDA-friendly design principles
|
|
- [x] Implement federation API client
|
|
- [x] Write tests for ConnectionCard
|
|
- [x] Implement ConnectionCard
|
|
- [x] Write tests for ConnectionList
|
|
- [x] Implement ConnectionList
|
|
- [x] Write tests for InitiateConnectionDialog
|
|
- [x] Implement InitiateConnectionDialog
|
|
- [x] Create connections page
|
|
- [x] Run all tests (42 tests passing)
|
|
- [x] TypeScript type checking (passing)
|
|
- [x] Linting (passing)
|
|
- [x] PDA-friendliness review (all language reviewed)
|
|
- [x] Final QA (ready for review)
|
|
|
|
## Testing Strategy
|
|
|
|
- Unit tests for each component
|
|
- Integration tests for the connections page
|
|
- Test error states and edge cases
|
|
- Test PDA-friendly language compliance
|
|
- Ensure all tests pass before commit
|
|
|
|
## Notes
|
|
|
|
- Backend API is complete from Phase 1-3
|
|
- Need to handle authentication with BetterAuth
|
|
- Consider WebSocket for real-time connection status updates (Phase 5)
|
|
- Connection metadata can be extended for future features
|