Improve user message for firefox and safari

Author: ericdallo

src/bridge/connection.ts

@@ -7,8 +7,8 @@
  * SSE connection.
  */
 
-import type { Protocol } from './utils';
-import { fetchWithTimeout, isLocalNetworkHost, resolveBaseUrl, resolveProtocol } from './utils';
+import type { BrowserKind, Protocol } from './utils';
+import { detectBrowser, fetchWithTimeout, isLocalNetworkHost, resolveBaseUrl, resolveProtocol } from './utils';
 
 /**
  * Lightweight probe to check if an ECA server is listening on a given port.
@@ -38,15 +38,63 @@ export async function probePort(
 }
 
 /** True when the page is served over HTTPS and the target is plain HTTP on a private IP. */
-function isMixedContentScenario(host: string, protocol?: Protocol): boolean {
+export function isMixedContentScenario(host: string, protocol?: Protocol): boolean {
   return globalThis.location?.protocol === 'https:'
     && resolveProtocol(host, protocol) === 'http'
     && isLocalNetworkHost(host);
 }
 
-const MIXED_CONTENT_HINT =
-  'Your browser may be blocking this request (HTTPS → HTTP on a private network). '
-  + 'Check that you\'ve allowed Local Network Access for this site in your browser settings.';
+/**
+ * Return a browser-specific explanation for mixed-content failures.
+ *
+ * Chrome's `targetAddressSpace` triggers its own Local Network Access
+ * prompt, so it gets a short nudge.  Firefox and Safari have **no**
+ * programmatic escape hatch — the only realistic options are switching
+ * to a Chromium-based browser or loading the page over plain HTTP.
+ */
+function mixedContentHintFor(browser: BrowserKind): string {
+  switch (browser) {
+    case 'chrome':
+      return 'Allow the Local Network Access prompt in your browser, then retry.';
+    case 'firefox':
+      return 'Firefox blocks HTTPS pages from connecting to private HTTP servers. '
+        + 'Use a Chromium-based browser (Chrome, Edge, Brave) or access this page over HTTP instead.';
+    case 'safari':
+      return 'Safari blocks HTTPS pages from connecting to private HTTP servers. '
+        + 'Use a Chromium-based browser (Chrome, Edge, Brave) or access this page over HTTP instead.';
+    default:
+      return 'Your browser may be blocking this request (HTTPS → HTTP on a private network). '
+        + 'Try using a Chromium-based browser (Chrome, Edge, Brave) or access this page over HTTP instead.';
+  }
+}
+
+/**
+ * Proactive mixed-content warning for the ConnectForm.
+ *
+ * Returns a user-facing hint string when the host/protocol combination
+ * will trigger mixed-content blocking, or `null` when no warning is
+ * needed (page served over HTTP, target is public, or Chrome which
+ * handles it via the LNA prompt automatically).
+ */
+export function getMixedContentWarning(host: string, protocol?: Protocol): string | null {
+  if (!isMixedContentScenario(host, protocol)) return null;
+  const browser = detectBrowser();
+  // Chrome handles this via targetAddressSpace + LNA prompt — no warning needed
+  if (browser === 'chrome') return null;
+  return mixedContentHintFor(browser);
+}
+
+/**
+ * Check whether a connection error is likely caused by mixed-content
+ * blocking and return a helpful hint, or `null` if unrelated.
+ *
+ * Used by RemoteSession to decorate post-connect errors (e.g. Safari's
+ * `TypeError` when the SSE fetch is silently blocked).
+ */
+export function getMixedContentErrorHint(host: string, protocol?: Protocol): string | null {
+  if (!isMixedContentScenario(host, protocol)) return null;
+  return mixedContentHintFor(detectBrowser());
+}
 
 /**
  * Test whether a host is reachable and the password is valid.
@@ -58,7 +106,7 @@ const MIXED_CONTENT_HINT =
  */
 export async function testConnection(host: string, password: string, protocol?: Protocol): Promise<string | null> {
   const baseUrl = resolveBaseUrl(host, protocol);
-  const mixedContent = isMixedContentScenario(host, protocol);
+  const mixedContentHint = getMixedContentErrorHint(host, protocol);
 
   // 1. Test host reachability (health endpoint — no auth)
   try {
@@ -70,12 +118,12 @@ export async function testConnection(host: string, password: string, protocol?:
     }
   } catch (err: any) {
     if (err.name === 'AbortError') {
-      return mixedContent
-        ? `Connection timed out. ${MIXED_CONTENT_HINT}`
+      return mixedContentHint
+        ? `Connection timed out. ${mixedContentHint}`
         : 'Connection timed out. Check the address and try again.';
     }
-    return mixedContent
-      ? `Could not reach host. ${MIXED_CONTENT_HINT}`
+    return mixedContentHint
+      ? `Could not reach host. ${mixedContentHint}`
       : 'Could not reach host. Check the address and try again.';
   }
 

src/bridge/utils.ts

@@ -7,6 +7,30 @@
  */
 
 export type Protocol = 'http' | 'https';
+export type BrowserKind = 'chrome' | 'firefox' | 'safari' | 'other';
+
+/**
+ * Detect the current browser from the user-agent string.
+ *
+ * We only care about Chrome, Firefox and Safari because each handles
+ * mixed-content / Local Network Access differently:
+ * - Chrome supports `targetAddressSpace` and shows an LNA prompt
+ * - Firefox and Safari block HTTPS→HTTP silently with no API escape hatch
+ *
+ * Order matters: Chrome's UA also contains "Safari", and many browsers
+ * (Edge, Opera, Brave) contain "Chrome", which is fine — they all
+ * inherit Chrome's LNA behaviour.
+ */
+export function detectBrowser(): BrowserKind {
+  const ua = navigator.userAgent;
+  // All Chromium-based browsers (Chrome, Edge, Brave, Opera, Arc…)
+  // include "Chrome/" in their UA and inherit LNA support.
+  if (/Chrome\//.test(ua)) return 'chrome';
+  if (/Firefox\//.test(ua)) return 'firefox';
+  // Real Safari has "Safari/" but NOT "Chrome/"
+  if (/Safari\//.test(ua)) return 'safari';
+  return 'other';
+}
 
 /** RFC 1918 private addresses (192.168.x, 10.x, 172.16-31.x). */
 const PRIVATE_NETWORK_RE =

src/pages/ConnectForm.css

@@ -415,6 +415,29 @@
   cursor: not-allowed;
 }
 
+/* ---- Mixed-content warning banner ---- */
+
+.mixed-content-warning {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.55rem;
+  margin-top: 0.25rem;
+  padding: 0.6rem 0.85rem;
+  background: rgba(218, 165, 32, 0.08);
+  border: 1px solid rgba(218, 165, 32, 0.22);
+  border-radius: 0.6rem;
+  color: #d4a017;
+  font-size: 0.78rem;
+  line-height: 1.55;
+  text-align: left;
+}
+
+.mixed-content-warning-icon {
+  flex-shrink: 0;
+  font-size: 0.9rem;
+  line-height: 1.35;
+}
+
 /* ---- Error banner ---- */
 
 .connect-error {

src/pages/ConnectForm.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { getMixedContentWarning } from '../bridge/connection';
 import type { Protocol } from '../bridge/utils';
 import { CodeRain } from '../components/CodeRain';
 import './ConnectForm.css';
@@ -41,6 +42,12 @@ export function ConnectForm({ onConnect, onDiscover, error, isConnecting, discov
     setProtocol(isPrivate ? 'http' : 'https');
   }, [host]);
 
+  // Proactive warning for Firefox/Safari when HTTPS→HTTP to private IP
+  const mixedContentWarning = useMemo(
+    () => getMixedContentWarning(host.trim(), protocol),
+    [host, protocol],
+  );
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     const trimmedHost = host.trim();
@@ -144,6 +151,13 @@ export function ConnectForm({ onConnect, onDiscover, error, isConnecting, discov
             </div>
           )}
 
+          {mixedContentWarning && (
+            <div className="mixed-content-warning">
+              <span className="mixed-content-warning-icon">⚠</span>
+              <span>{mixedContentWarning}</span>
+            </div>
+          )}
+
           <button
             type="submit"
             className="connect-button"

src/pages/RemoteProduct.tsx

@@ -12,7 +12,7 @@
 
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { EcaRemoteApi } from '../bridge/api';
-import { probePort, testConnection } from '../bridge/connection';
+import { getMixedContentErrorHint, probePort, testConnection } from '../bridge/connection';
 import type { WebBridge } from '../bridge/transport';
 import type { ChatEntry, WorkspaceFolder } from '../bridge/types';
 import type { Protocol } from '../bridge/utils';
@@ -187,7 +187,9 @@ export function RemoteProduct() {
 
     // Only error when zero servers were discovered
     if (progress.found.length === 0) {
-      setFormError('No ECA servers found on ports 7777–7796. Check the host and password.');
+      const mixedHint = getMixedContentErrorHint(host, protocol);
+      const base = 'No ECA servers found on ports 7777–7796.';
+      setFormError(mixedHint ? `${base} ${mixedHint}` : `${base} Check the host and password.`);
       setFormConnecting(false);
       return;
     }

src/pages/RemoteSession.tsx

@@ -1,5 +1,6 @@
 import { Component, useCallback, useEffect, useRef, useState } from 'react';
 import type { ErrorInfo, ReactNode } from 'react';
+import { getMixedContentErrorHint } from '../bridge/connection';
 import { WebBridge } from '../bridge/transport';
 import type { ReconnectionState } from '../bridge/types';
 import type { Protocol } from '../bridge/utils';
@@ -124,7 +125,12 @@ export function RemoteSession({ host, password, protocol, lastChatId, onStatusCh
       bridge.disconnect();
       if (!mountedRef.current) return;
       bridgeRef.current = null;
-      const message = err.message || 'Connection failed';
+      let message = err.message || 'Connection failed';
+      // Decorate generic errors (e.g. Safari's "TypeError") with mixed-content guidance
+      const mixedHint = getMixedContentErrorHint(host, protocol);
+      if (mixedHint) {
+        message = `${message}. ${mixedHint}`;
+      }
       setState({ status: 'error', message });
       onStatusChangeRef.current('error', message);
       onBridgeChangeRef.current?.(null);