feat(clients): comprehensive WRAITH-Chat UI redesign

- Add professional header with connection status, peer ID, session stats
- Add sidebar with search, filter tabs, New Chat/Group buttons
- Add chat header with voice/video call buttons
- Improve message bubbles with read receipts, date separators
- Add collapsible info panel for contact/group details
- Add 7-tab settings modal (Profile, Privacy, Notifications, Appearance, Voice/Video, Security, About)
- Add video call overlay with quality controls
- Add group creation wizard with member selection
- Fix Tauri build configuration for wraith-chat
- Update Tailwind CSS to v4 with proper Vite plugin
- Update documentation with current project status

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: doublegate

CHANGELOG.md

@@ -11,6 +11,103 @@ _No changes yet._
 
 ---
 
+## [1.7.1] - 2026-01-21 - WRAITH-Chat UI Redesign
+
+### WRAITH-Chat Comprehensive UI Redesign
+
+This release delivers a major UI overhaul for WRAITH-Chat, transforming it into a professional-grade messaging application with enhanced visual design, improved user experience, and comprehensive feature controls.
+
+### Highlights
+
+- **Professional Header**: Connection status indicator, peer ID display with copy button, session statistics
+- **Sidebar Navigation**: Search functionality, conversation filters (All/Direct/Groups), New Chat/Group buttons
+- **Enhanced Chat Experience**: Voice/video call buttons, improved message bubbles with read receipts, date separators
+- **Info Panel**: Collapsible contact/group details, encryption verification, member lists
+- **7-Tab Settings Modal**: Profile, Privacy, Notifications, Appearance, Voice/Video, Security, About
+- **Video Call Overlay**: Quality controls, layout options, recording functionality
+- **Group Creation Wizard**: Step-by-step group setup with member selection
+
+### Added
+
+#### Header Component
+- Connection status indicator (Connected/Connecting/Disconnected) with color-coded badge
+- Peer ID display with truncation and one-click copy functionality
+- Session statistics showing active sessions and transfers count
+- Settings button with gear icon for quick access
+
+#### Sidebar Component
+- Search bar for filtering conversations by name or content
+- Filter tabs: All Conversations, Direct Messages, Groups
+- "New Chat" button for starting direct conversations
+- "New Group" button launching group creation wizard
+- Conversation list with unread message count badges
+- Online/offline status indicators for contacts
+
+#### Chat Header
+- Contact/group name and avatar display
+- Voice call button with phone icon
+- Video call button with camera icon
+- More options menu (mute, block, clear history)
+
+#### Message Bubbles
+- Distinct styling for sent vs received messages
+- Read receipts with checkmark indicators (sent, delivered, read)
+- Timestamp display with relative time formatting
+- Date separators between messages on different days
+- Context menu on right-click (copy, reply, delete, forward)
+
+#### Info Panel
+- Collapsible panel toggled by info button in chat header
+- Contact details: avatar, name, peer ID, safety number
+- Encryption status with verification badge
+- Group details: member count, description, creation date
+- Member list for groups with admin badges
+- Shared media gallery preview
+
+#### Settings Modal (7 Tabs)
+- **Profile**: Display name, avatar upload, status message
+- **Privacy**: Read receipts toggle, typing indicators, profile visibility
+- **Notifications**: Sound toggles, desktop notifications, message preview
+- **Appearance**: Theme selection (Light/Dark/System), font size, chat density
+- **Voice/Video**: Microphone/camera selection, noise suppression toggle, echo cancellation
+- **Security**: Session list with device info, password change, 2FA setup
+- **About**: Version info, license, links to documentation and support
+
+#### Video Call Overlay
+- Full-screen video display with participant grid
+- Quality indicator showing resolution and bitrate
+- Layout toggle (grid, spotlight, sidebar)
+- Controls: mute audio, toggle video, share screen, end call
+- Recording button with indicator
+- Participant list with mute status
+
+#### Group Creation Wizard
+- Step 1: Group name and optional avatar
+- Step 2: Member selection from contacts list with search
+- Step 3: Privacy settings (public/private, join approval)
+- Step 4: Review and create confirmation
+
+### Changed
+- Tailwind CSS upgraded to v4 with @tailwindcss/vite plugin
+- Zustand stores expanded for voice, video, and group state management
+- Frontend code expanded from ~1,800 to ~3,200 lines
+- Improved dark theme with consistent color palette
+- Enhanced accessibility with ARIA labels and keyboard navigation
+
+### Fixed
+- Tauri build configuration for wraith-chat client
+- Vite plugin compatibility with Tailwind CSS v4
+- ESLint configuration for strict TypeScript checks
+- React lint warnings for unused variables
+
+### Technical Details
+- **Frontend Lines**: ~3,200 (was ~1,800)
+- **New Components**: 8 major UI components
+- **Zustand Stores**: 6 stores (node, conversation, message, contact, voice, video)
+- **Dependencies Updated**: Tailwind CSS v4.0, @tailwindcss/vite 4.0
+
+---
+
 ## [1.7.0] - 2026-01-21 - Phase 17 Complete: Full Mobile Integration, Real-Time Communications & WRAITH-Sync
 
 ### Phase 17 - Mobile Protocol Integration, Push Notifications, Voice/Video Calling, Group Messaging, WRAITH-Sync

README.md

@@ -9,17 +9,17 @@ A decentralized secure file transfer protocol optimized for high-throughput, low
 [![CI Status](https://github.com/doublegate/WRAITH-Protocol/actions/workflows/ci.yml/badge.svg)](https://github.com/doublegate/WRAITH-Protocol/actions/workflows/ci.yml)
 [![CodeQL](https://github.com/doublegate/WRAITH-Protocol/actions/workflows/codeql.yml/badge.svg)](https://github.com/doublegate/WRAITH-Protocol/actions/workflows/codeql.yml)
 [![Release](https://github.com/doublegate/WRAITH-Protocol/actions/workflows/release.yml/badge.svg)](https://github.com/doublegate/WRAITH-Protocol/actions/workflows/release.yml)
-[![Version](https://img.shields.io/badge/version-1.7.0-blue.svg)](https://github.com/doublegate/WRAITH-Protocol/releases)
+[![Version](https://img.shields.io/badge/version-1.7.1-blue.svg)](https://github.com/doublegate/WRAITH-Protocol/releases)
 [![Security](https://img.shields.io/badge/security-audited-green.svg)](docs/security/SECURITY_AUDIT_v1.1.0.md)
 [![Rust](https://img.shields.io/badge/rust-1.85%2B-orange.svg)](https://www.rust-lang.org/)
 [![Edition](https://img.shields.io/badge/edition-2024-orange.svg)](https://doc.rust-lang.org/edition-guide/rust-2024/index.html)
 [![License](https://img.shields.io/badge/license-MIT-green.svg)](LICENSE)
 
 ## Current Status
 
-**Version:** 1.7.0 Phase 17 Complete + WRAITH-Sync | **Development Phase:** Phase 17 Complete
+**Version:** 1.7.1 WRAITH-Chat UI Redesign | **Development Phase:** Phase 17 Complete
 
-WRAITH Protocol is production-ready with desktop, mobile, and messaging applications featuring full protocol integration, real-time voice/video calling, and advanced group messaging. Phase 17 completes the mobile ecosystem with actual WRAITH protocol bindings (replacing placeholders), secure native storage (Android Keystore, iOS Keychain), push notifications (FCM/APNs), encrypted voice/video calls (Opus/VP8/VP9), and Sender Keys group messaging for efficient multi-party encryption.
+WRAITH Protocol is production-ready with desktop, mobile, and messaging applications featuring full protocol integration, real-time voice/video calling, and advanced group messaging. Phase 17 completes the mobile ecosystem with actual WRAITH protocol bindings (replacing placeholders), secure native storage (Android Keystore, iOS Keychain), push notifications (FCM/APNs), encrypted voice/video calls (Opus/VP8/VP9), and Sender Keys group messaging for efficient multi-party encryption. Version 1.7.1 adds a comprehensive UI redesign for WRAITH-Chat with professional header, sidebar navigation, enhanced message bubbles, 7-tab settings modal, video call overlay, and group creation wizard.
 
 **Project Metrics (2026-01-21):**
 - **Code Volume:** ~72,400 lines of Rust code across protocol crates + ~14,100 lines in client applications (Kotlin/Swift/TypeScript)
@@ -31,6 +31,17 @@ WRAITH Protocol is production-ready with desktop, mobile, and messaging applicat
 - **Client Applications:** 5 production-ready applications (4 Tier 1 + 1 Tier 2) with full protocol integration
 - **CI/CD:** GitHub Actions updated (upload-artifact v6, download-artifact v7, cache v5)
 
+**v1.7.1 Highlights (WRAITH-Chat UI Redesign):**
+- Professional Header: Connection status indicator, peer ID display, session statistics
+- Sidebar Navigation: Search, conversation filters (All/Direct/Groups), New Chat/Group buttons
+- Enhanced Chat: Voice/video call buttons, message bubbles with read receipts, date separators
+- Info Panel: Collapsible contact/group details, encryption verification, member lists
+- 7-Tab Settings Modal: Profile, Privacy, Notifications, Appearance, Voice/Video, Security, About
+- Video Call Overlay: Quality controls, layout options, recording functionality
+- Group Creation Wizard: Step-by-step group setup with member selection
+- Tailwind CSS v4: Upgraded with @tailwindcss/vite plugin
+- Frontend expanded from ~1,800 to ~3,200 lines with 8 new UI components
+
 **Phase 17 Highlights:**
 - Mobile Protocol Integration: Android JNI and iOS UniFFI with actual WRAITH protocol bindings (26 new tests)
 - Mobile Secure Storage: Android Keystore and iOS Keychain for hardware-backed key storage (45 new tests)
@@ -753,6 +764,6 @@ WRAITH Protocol builds on the work of many excellent projects and technologies:
 
 **WRAITH Protocol** - *Secure. Fast. Invisible.*
 
-**Status:** v1.7.0 Phase 17 Complete + WRAITH-Sync | **License:** MIT | **Language:** Rust 2024 (MSRV 1.85) | **Tests:** 1,695 passing (16 ignored) | **Quality:** Production-ready, 0 vulnerabilities, zero warnings, 98/100 quality grade | **Clients:** 5 applications with full protocol integration, voice/video calling, group messaging, and file synchronization
+**Status:** v1.7.1 WRAITH-Chat UI Redesign | **License:** MIT | **Language:** Rust 2024 (MSRV 1.85) | **Tests:** 1,712 passing (16 ignored) | **Quality:** Production-ready, 0 vulnerabilities, zero warnings, 98/100 quality grade | **Clients:** 5 applications with full protocol integration, voice/video calling, group messaging, file synchronization, and professional UI redesign
 
 *Last Updated: 2026-01-21*

clients/wraith-chat/frontend/dist/index.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>WRAITH Chat</title>
-    <script type="module" crossorigin src="/assets/index-BQjXt0nW.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BrCg67_n.css">
+    <script type="module" crossorigin src="/assets/index-fZfPkBPr.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-dS-UZ-Bn.css">
   </head>
   <body>
     <div id="root"></div>

clients/wraith-chat/frontend/package.json

@@ -11,6 +11,7 @@
     "format": "prettier --write \"src/**/*.{ts,tsx,css}\""
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.1.17",
     "@tauri-apps/api": "^2.0.0",
     "@tauri-apps/plugin-dialog": "^2.0.0",
     "@tauri-apps/plugin-fs": "^2.0.0",
@@ -32,7 +33,7 @@
     "globals": "^15.0.0",
     "postcss": "^8.4.0",
     "prettier": "^3.1.0",
-    "tailwindcss": "^3.4.0",
+    "tailwindcss": "^4.1.17",
     "typescript": "^5.3.0",
     "typescript-eslint": "^8.0.0",
     "vite": "^5.0.0"