Replace native Twilio Voice SDK with WebView-based softphone

Rewrites the mobile app from a native Twilio Voice SDK integration
(Android Telecom/ConnectionService) to a thin WebView shell that loads
a standalone browser phone page from WordPress. This eliminates the
buggy Android phone account registration, fixes frequent logouts by
using 7-day WP session cookies instead of JWT tokens, and maintains
all existing call features (dialpad, queues, hold, transfer, requeue,
recording, caller ID, agent status).

Server-side:
- Add class-twp-mobile-phone-page.php: standalone /twp-phone/ endpoint
  with mobile-optimized UI, dark mode, tab navigation, and Flutter
  WebView JS bridge
- Extend auth cookie to 7 days for phone agents
- Add WP AJAX handler for FCM token registration (cookie auth)

Flutter app (v2.0.0):
- Replace 18 native files with 5-file WebView shell
- Login via wp-login.php in WebView (auto-detect redirect on success)
- Full-screen WebView with auto microphone grant for WebRTC
- FCM push notifications preserved for queue alerts
- Remove: twilio_voice, dio, provider, JWT auth, SSE, native call UI

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

mobile/lib/screens/login_screen.dart

@@ -1,22 +1,29 @@
 import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
-import 'package:provider/provider.dart';
-import '../providers/auth_provider.dart';
 import 'package:flutter_secure_storage/flutter_secure_storage.dart';
+import 'package:webview_flutter/webview_flutter.dart';
 
+/// Login screen that loads wp-login.php in a WebView.
+///
+/// When the user successfully logs in, WordPress redirects to /twp-phone/.
+/// We detect that URL change and report login success to the parent.
 class LoginScreen extends StatefulWidget {
-  const LoginScreen({super.key});
+  final void Function(String serverUrl) onLoginSuccess;
+
+  const LoginScreen({super.key, required this.onLoginSuccess});
 
   @override
   State<LoginScreen> createState() => _LoginScreenState();
 }
 
 class _LoginScreenState extends State<LoginScreen> {
+  static const _storage = FlutterSecureStorage();
+
   final _formKey = GlobalKey<FormState>();
   final _serverController = TextEditingController();
-  final _usernameController = TextEditingController();
-  final _passwordController = TextEditingController();
-  bool _obscurePassword = true;
+  bool _showWebView = false;
+  bool _webViewLoading = true;
+  String? _error;
+  late WebViewController _webViewController;
 
   @override
   void initState() {
@@ -25,40 +32,107 @@ class _LoginScreenState extends State<LoginScreen> {
   }
 
   Future<void> _loadSavedServer() async {
-    const storage = FlutterSecureStorage();
-    final saved = await storage.read(key: 'server_url');
+    final saved = await _storage.read(key: 'server_url');
     if (saved != null && mounted) {
       _serverController.text = saved;
     }
   }
 
-  void _submit() {
+  void _startLogin() {
     if (!_formKey.currentState!.validate()) return;
 
     var serverUrl = _serverController.text.trim();
     if (!serverUrl.startsWith('http')) {
       serverUrl = 'https://$serverUrl';
     }
+    // Remove trailing slash
+    serverUrl = serverUrl.replaceAll(RegExp(r'/+$'), '');
 
-    TextInput.finishAutofillContext();
-    context.read<AuthProvider>().login(
-          serverUrl,
-          _usernameController.text.trim(),
-          _passwordController.text,
-        );
+    setState(() {
+      _showWebView = true;
+      _webViewLoading = true;
+      _error = null;
+    });
+
+    final loginUrl =
+        '$serverUrl/wp-login.php?redirect_to=${Uri.encodeComponent('$serverUrl/twp-phone/')}';
+
+    _webViewController = WebViewController()
+      ..setJavaScriptMode(JavaScriptMode.unrestricted)
+      ..setNavigationDelegate(
+        NavigationDelegate(
+          onPageStarted: (url) {
+            // Check if we've been redirected to the phone page (login success)
+            if (url.contains('/twp-phone/') || url.endsWith('/twp-phone')) {
+              _onLoginComplete(serverUrl);
+            }
+          },
+          onPageFinished: (url) {
+            if (mounted) {
+              setState(() => _webViewLoading = false);
+            }
+            // Also check on page finish in case redirect was instant
+            if (url.contains('/twp-phone/') || url.endsWith('/twp-phone')) {
+              _onLoginComplete(serverUrl);
+            }
+          },
+          onWebResourceError: (error) {
+            if (mounted) {
+              setState(() {
+                _showWebView = false;
+                _error =
+                    'Could not connect to server: ${error.description}';
+              });
+            }
+          },
+        ),
+      )
+      ..setUserAgent('TWPMobile/2.0 (Android; WebView)')
+      ..loadRequest(Uri.parse(loginUrl));
+  }
+
+  Future<void> _onLoginComplete(String serverUrl) async {
+    // Save server URL for next launch
+    await _storage.write(key: 'server_url', value: serverUrl);
+    if (mounted) {
+      widget.onLoginSuccess(serverUrl);
+    }
+  }
+
+  void _cancelLogin() {
+    setState(() {
+      _showWebView = false;
+      _error = null;
+    });
   }
 
   @override
   Widget build(BuildContext context) {
-    final auth = context.watch<AuthProvider>();
+    if (_showWebView) {
+      return Scaffold(
+        appBar: AppBar(
+          leading: IconButton(
+            icon: const Icon(Icons.arrow_back),
+            onPressed: _cancelLogin,
+          ),
+          title: const Text('Sign In'),
+        ),
+        body: Stack(
+          children: [
+            WebViewWidget(controller: _webViewController),
+            if (_webViewLoading)
+              const Center(child: CircularProgressIndicator()),
+          ],
+        ),
+      );
+    }
 
     return Scaffold(
       body: SafeArea(
         child: Center(
           child: SingleChildScrollView(
             padding: const EdgeInsets.all(24),
-            child: AutofillGroup(
-              child: Form(
+            child: Form(
               key: _formKey,
               child: Column(
                 mainAxisSize: MainAxisSize.min,
@@ -87,42 +161,10 @@ class _LoginScreenState extends State<LoginScreen> {
                     validator: (v) =>
                         v == null || v.trim().isEmpty ? 'Required' : null,
                   ),
-                  const SizedBox(height: 16),
-                  TextFormField(
-                    controller: _usernameController,
-                    decoration: const InputDecoration(
-                      labelText: 'Username',
-                      prefixIcon: Icon(Icons.person),
-                      border: OutlineInputBorder(),
-                    ),
-                    autofillHints: const [AutofillHints.username],
-                    validator: (v) =>
-                        v == null || v.trim().isEmpty ? 'Required' : null,
-                  ),
-                  const SizedBox(height: 16),
-                  TextFormField(
-                    controller: _passwordController,
-                    decoration: InputDecoration(
-                      labelText: 'Password',
-                      prefixIcon: const Icon(Icons.lock),
-                      border: const OutlineInputBorder(),
-                      suffixIcon: IconButton(
-                        icon: Icon(_obscurePassword
-                            ? Icons.visibility_off
-                            : Icons.visibility),
-                        onPressed: () =>
-                            setState(() => _obscurePassword = !_obscurePassword),
-                      ),
-                    ),
-                    obscureText: _obscurePassword,
-                    autofillHints: const [AutofillHints.password],
-                    validator: (v) =>
-                        v == null || v.isEmpty ? 'Required' : null,
-                  ),
-                  if (auth.error != null) ...[
+                  if (_error != null) ...[
                     const SizedBox(height: 16),
                     Text(
-                      auth.error!,
+                      _error!,
                       style: TextStyle(
                           color: Theme.of(context).colorScheme.error),
                     ),
@@ -132,23 +174,13 @@ class _LoginScreenState extends State<LoginScreen> {
                     width: double.infinity,
                     height: 48,
                     child: FilledButton(
-                      onPressed: auth.state == AuthState.authenticating
-                          ? null
-                          : _submit,
-                      child: auth.state == AuthState.authenticating
-                          ? const SizedBox(
-                              width: 24,
-                              height: 24,
-                              child: CircularProgressIndicator(
-                                  strokeWidth: 2, color: Colors.white),
-                            )
-                          : const Text('Connect'),
+                      onPressed: _startLogin,
+                      child: const Text('Connect'),
                     ),
                   ),
                 ],
               ),
             ),
-            ),
           ),
         ),
       ),
@@ -158,8 +190,6 @@ class _LoginScreenState extends State<LoginScreen> {
   @override
   void dispose() {
     _serverController.dispose();
-    _usernameController.dispose();
-    _passwordController.dispose();
     super.dispose();
   }
 }