feat(#91): implement Connection Manager UI for federation

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>

docs/scratchpads/91-connection-manager-ui.md

@@ -0,0 +1,128 @@
+# 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