[feat](trx-frontend-http): complete HTTP authentication implementation (phases 4-5)

Phase 4: Frontend login gate and role-based UI
- Add auth-gate HTML overlay with passphrase form
- Implement checkAuthStatus, authLogin, authLogout functions
- Auth startup sequence checks /auth/session before connecting
- Apply role-based restrictions: hide PTT/TX controls for rx role
- Handle 401/403 errors in postPath, return to login screen
- Add logout button in About tab with auth role display
- Passphrase form shows generic error messages (no info leakage)

Phase 5: Documentation
- Update trx-client.toml.example with [frontends.http.auth] section
  - All config fields with inline documentation and examples
  - security notes about cookie settings
- Update README.md with HTTP Frontend Authentication section
  - Role model explanation (rx vs control)
  - Configuration example
  - Security considerations for local, LAN, and remote deployments
  - Architecture overview

UI Features:
- Login gate blocks main UI until authenticated
- Role badge shows authenticated status in About tab
- Error messages clear after 5 seconds
- Logout confirmation prevents accidental logouts
- Smooth transition from auth gate to main UI

All code compiles successfully. HTTP frontend build verified.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Stanislaw Grams <stanislawgrams@gmail.com>

src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html

@@ -25,6 +25,20 @@
         <button id="theme-toggle" class="theme-toggle-btn" type="button" aria-label="Toggle dark or light theme">Light</button>
       </div>
     </div>
+    <!-- Auth gate (hidden by default, shown if auth is required) -->
+    <div id="auth-gate" style="display:none; padding: 3rem 2rem; text-align: center;">
+      <div style="margin-bottom: 1.5rem;">
+        <img src="/logo.png?v=1" alt="trx logo" style="max-width: 80px; margin-bottom: 1rem;" onerror="this.style.display='none'" />
+        <div style="font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem;">Access Required</div>
+        <div style="color: var(--text-muted);">Enter passphrase to continue</div>
+      </div>
+      <form id="auth-form" style="margin: 1.5rem 0;">
+        <input type="password" id="auth-passphrase" placeholder="Passphrase" autocomplete="off" style="width: 100%; padding: 0.5rem; margin-bottom: 1rem; border: 1px solid var(--border); border-radius: 0.25rem; background: var(--bg-secondary); color: var(--text); font-size: 1rem;" />
+        <button type="submit" style="width: 100%; padding: 0.5rem; background: var(--accent-green); color: var(--bg-primary); border: none; border-radius: 0.25rem; font-weight: 600; cursor: pointer; font-size: 1rem;">Login</button>
+      </form>
+      <div id="auth-error" style="color: #ff6b6b; font-size: 0.9rem; margin-top: 1rem; display: none;"></div>
+      <div id="auth-role" style="margin-top: 1rem; color: var(--text-muted); font-size: 0.85rem; display: none;"></div>
+    </div>
     <div class="tab-bar">
       <button class="tab active" data-tab="main">Main</button>
       <button class="tab" data-tab="plugins">Plugins</button>
@@ -224,6 +238,10 @@
       </div>
     </div>
     <div id="tab-about" class="tab-panel" style="display:none;">
+      <div style="margin-bottom: 1rem;">
+        <button id="logout-btn" type="button" style="display:none; padding: 0.5rem 1rem; background: var(--accent-red, #ff6b6b); color: var(--bg-primary); border: none; border-radius: 0.25rem; font-weight: 600; cursor: pointer;">Logout</button>
+        <div id="auth-badge" style="display:none; margin-top: 0.5rem; color: var(--text-muted); font-size: 0.85rem;">Authenticated as: <strong id="auth-role-badge">--</strong></div>
+      </div>
       <table class="about-table">
         <tr><td>Server version</td><td id="about-server-ver">--</td></tr>
         <tr><td>Server address</td><td id="about-server-addr">--</td></tr>