Support new private ips https

Author: ericdallo

src/bridge/connection.ts

@@ -8,7 +8,7 @@
  */
 
 import type { BrowserKind, Protocol } from './utils';
-import { detectBrowser, fetchWithTimeout, isLocalNetworkHost, resolveBaseUrl, resolveProtocol } from './utils';
+import { detectBrowser, fetchWithTimeout, ipToSslipHostname, isLocalNetworkHost, isRawPrivateIp, resolveBaseUrl, resolveProtocol } from './utils';
 
 /**
  * Lightweight probe to check if an ECA server is listening on a given port.
@@ -23,14 +23,18 @@ import { detectBrowser, fetchWithTimeout, isLocalNetworkHost, resolveBaseUrl, re
 export async function probePort(
   host: string,
   port: number,
-  preferredProtocol: Protocol = 'http',
+  preferredProtocol: Protocol = 'https',
 ): Promise<boolean> {
   const protocols: Protocol[] =
     preferredProtocol === 'https' ? ['https', 'http'] : ['http', 'https'];
 
   const results = await Promise.allSettled(
     protocols.map(async (proto) => {
-      const url = `${proto}://${host}:${port}/api/v1/health`;
+      // For HTTPS to a raw private IP, use the sslip.io hostname so the TLS cert matches
+      const effectiveHost = proto === 'https' && isRawPrivateIp(host)
+        ? ipToSslipHostname(`${host}:${port}`).split(':')[0]
+        : host;
+      const url = `${proto}://${effectiveHost}:${port}/api/v1/health`;
       await fetchWithTimeout(url, { mode: 'no-cors' }, 3_000);
     }),
   );

src/bridge/utils.ts

@@ -39,12 +39,58 @@ const PRIVATE_NETWORK_RE =
 /** Loopback addresses (127.x, localhost). */
 const LOOPBACK_RE = /^(127\.|localhost)/i;
 
+/** sslip.io-style hostname under local.eca.dev with an embedded IP (e.g. 192-168-1-1.local.eca.dev). */
+const SSLIP_LOCAL_RE =
+  /^(\d{1,3})-(\d{1,3})-(\d{1,3})-(\d{1,3})\.local\.eca\.dev$/i;
+
+const SSLIP_DOMAIN = 'local.eca.dev';
+
+/**
+ * Extract the embedded IP from an sslip.io-style hostname.
+ * E.g. "192-168-15-17.local.eca.dev" → "192.168.15.17"
+ * Returns undefined if the hostname doesn't match.
+ */
+export function extractSslipIp(host: string): string | undefined {
+  const match = SSLIP_LOCAL_RE.exec(host);
+  if (!match) return undefined;
+  return `${match[1]}.${match[2]}.${match[3]}.${match[4]}`;
+}
+
+/**
+ * Convert a raw IP to its sslip.io-style hostname under local.eca.dev.
+ * E.g. "192.168.15.17" → "192-168-15-17.local.eca.dev"
+ *
+ * If `hostWithPort` contains a port (e.g. "192.168.1.42:7777"), the port
+ * is preserved: "192-168-1-42.local.eca.dev:7777".
+ *
+ * Returns the input unchanged if it's not a raw IPv4 address.
+ */
+export function ipToSslipHostname(hostWithPort: string): string {
+  const [hostPart, port] = hostWithPort.split(':');
+  if (!/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(hostPart)) return hostWithPort;
+  const sslipHost = `${hostPart.replace(/\./g, '-')}.${SSLIP_DOMAIN}`;
+  return port ? `${sslipHost}:${port}` : sslipHost;
+}
+
+/**
+ * True when `host` is a raw private/loopback IPv4 (not already an sslip hostname).
+ * Useful to decide whether to transform a user-entered host to sslip form.
+ */
+export function isRawPrivateIp(host: string): boolean {
+  const hostPart = host.split(':')[0];
+  return (PRIVATE_NETWORK_RE.test(hostPart) || LOOPBACK_RE.test(hostPart))
+    && !SSLIP_LOCAL_RE.test(hostPart);
+}
+
 /**
  * Returns true when `host` targets a private/local network address.
+ * Also recognises sslip.io-style hostnames under *.local.eca.dev
+ * that embed a private IP (e.g. 192-168-15-17.local.eca.dev).
  * Used for protocol defaults and Chrome Local Network Access hints.
  */
 export function isLocalNetworkHost(host: string): boolean {
-  return PRIVATE_NETWORK_RE.test(host) || LOOPBACK_RE.test(host);
+  const resolved = extractSslipIp(host) ?? host;
+  return PRIVATE_NETWORK_RE.test(resolved) || LOOPBACK_RE.test(resolved);
 }
 
 /**
@@ -55,30 +101,42 @@ export function isLocalNetworkHost(host: string): boolean {
  * - `"private"` — RFC 1918 (10.x, 172.16-31.x, 192.168.x)
  * - `undefined` — public / not applicable
  *
+ * Also handles sslip.io-style *.local.eca.dev hostnames by extracting
+ * the embedded IP before classification.
+ *
  * Chrome validates that the resolved IP matches the declared space;
  * a mismatch causes the request to fail.
  */
 export function targetAddressSpace(host: string): string | undefined {
-  if (LOOPBACK_RE.test(host)) return 'local';
-  if (PRIVATE_NETWORK_RE.test(host)) return 'private';
+  const resolved = extractSslipIp(host) ?? host;
+  if (LOOPBACK_RE.test(resolved)) return 'local';
+  if (PRIVATE_NETWORK_RE.test(resolved)) return 'private';
   return undefined;
 }
 
 /**
  * Resolve the HTTP protocol for a given host string.
  * When an explicit protocol is provided it is used as-is;
- * otherwise private/loopback addresses → http, everything else → https.
+ * otherwise defaults to HTTPS (ECA servers support TLS for private IPs
+ * via *.local.eca.dev wildcard certs).
  */
 export function resolveProtocol(host: string, protocol?: Protocol): Protocol {
   if (protocol) return protocol;
-  return isLocalNetworkHost(host) ? 'http' : 'https';
+  return 'https';
 }
 
 /**
  * Build the base API URL for a host, e.g. "https://myhost:7888/api/v1".
+ *
+ * When connecting over HTTPS to a raw private IP, automatically rewrites
+ * the host to its sslip.io hostname so the TLS certificate matches.
  */
 export function resolveBaseUrl(host: string, protocol?: Protocol): string {
-  return `${resolveProtocol(host, protocol)}://${host}/api/v1`;
+  const proto = resolveProtocol(host, protocol);
+  const effectiveHost = proto === 'https' && isRawPrivateIp(host)
+    ? ipToSslipHostname(host)
+    : host;
+  return `${proto}://${effectiveHost}/api/v1`;
 }
 
 /**

src/pages/ConnectForm.css

@@ -415,6 +415,39 @@
   cursor: not-allowed;
 }
 
+/* ---- TLS / sslip.io info hint ---- */
+
+.connect-sslip-hint {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.55rem;
+  margin-top: 0.25rem;
+  padding: 0.6rem 0.85rem;
+  background: rgba(0, 165, 184, 0.06);
+  border: 1px solid rgba(0, 165, 184, 0.18);
+  border-radius: 0.6rem;
+  color: #5cc8d4;
+  font-size: 0.78rem;
+  line-height: 1.55;
+  text-align: left;
+}
+
+.connect-sslip-hint-icon {
+  flex-shrink: 0;
+  font-size: 0.85rem;
+  line-height: 1.35;
+}
+
+.connect-sslip-hint code {
+  background: rgba(0, 165, 184, 0.1);
+  padding: 0.1em 0.35em;
+  border-radius: 0.25em;
+  font-size: 0.88em;
+  color: #00c8dc;
+  border: 1px solid rgba(0, 165, 184, 0.12);
+  word-break: break-all;
+}
+
 /* ---- Mixed-content warning banner ---- */
 
 .mixed-content-warning {

src/pages/ConnectForm.tsx

@@ -1,6 +1,7 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { getMixedContentWarning } from '../bridge/connection';
 import type { Protocol } from '../bridge/utils';
+import { ipToSslipHostname, isRawPrivateIp } from '../bridge/utils';
 import { CodeRain } from '../components/CodeRain';
 import './ConnectForm.css';
 
@@ -33,21 +34,19 @@ export function ConnectForm({ onConnect, onDiscover, error, isConnecting, discov
   const [autoDiscover, setAutoDiscover] = useState(true);
   const userToggledProtocol = useRef(false);
 
-  // Auto-detect HTTP for private/local network addresses
-  useEffect(() => {
-    if (userToggledProtocol.current) return;
-    const h = host.trim();
-    const isPrivate =
-      /^(192\.168\.|10\.|172\.(1[6-9]|2\d|3[01])\.|127\.|localhost)/i.test(h);
-    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],
   );
 
+  // Show the resolved sslip.io hostname when connecting over HTTPS to a raw private IP
+  const sslipHint = useMemo(() => {
+    const h = host.trim();
+    if (protocol !== 'https' || !h || !isRawPrivateIp(h)) return null;
+    return ipToSslipHostname(h);
+  }, [host, protocol]);
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     const trimmedHost = host.trim();
@@ -151,6 +150,13 @@ export function ConnectForm({ onConnect, onDiscover, error, isConnecting, discov
             </div>
           )}
 
+          {sslipHint && (
+            <div className="connect-sslip-hint">
+              <span className="connect-sslip-hint-icon">🔒</span>
+              <span>Will connect via <code>{sslipHint}</code></span>
+            </div>
+          )}
+
           {mixedContentWarning && (
             <div className="mixed-content-warning">
               <span className="mixed-content-warning-icon">⚠</span>

src/pages/ConnectionBar.tsx

@@ -7,6 +7,7 @@
 
 import type { WorkspaceFolder } from '../bridge/types';
 import type { Protocol } from '../bridge/utils';
+import { extractSslipIp } from '../bridge/utils';
 import type { SessionStatus } from './RemoteSession';
 
 // ---------------------------------------------------------------------------
@@ -123,9 +124,18 @@ function getWorkspaceLabel(
   return { name, fullPath };
 }
 
-/** Truncate a host string to fit in the tab bar. */
+/**
+ * Format a host string for the tab bar.
+ * Converts sslip.io hostnames back to their embedded IP for readability
+ * (e.g. "192-168-1-42.local.eca.dev:7777" → "192.168.1.42:7777").
+ */
 function formatHost(host: string): string {
   const clean = host.replace(/^https?:\/\//, '');
+  const [hostPart, port] = clean.split(':');
+  const ip = extractSslipIp(hostPart);
+  if (ip) {
+    return port ? `${ip}:${port}` : ip;
+  }
   return clean.length > 28 ? clean.slice(0, 26) + '…' : clean;
 }
 

src/pages/RemoteProduct.tsx

@@ -16,6 +16,7 @@ import { getMixedContentErrorHint, probePort, testConnection } from '../bridge/c
 import type { WebBridge } from '../bridge/transport';
 import type { ChatEntry, WorkspaceFolder } from '../bridge/types';
 import type { Protocol } from '../bridge/utils';
+import { ipToSslipHostname, isRawPrivateIp } from '../bridge/utils';
 import { ChatSidebar, ChatSidebarToggle } from '../components/ChatSidebar';
 import {
   consumeDeepLink,
@@ -123,15 +124,20 @@ export function RemoteProduct() {
     setFormConnecting(true);
     setFormError(null);
 
+    // Rewrite raw private IPs to sslip.io hostname for HTTPS connections
+    const effectiveHost = protocol === 'https' && isRawPrivateIp(host)
+      ? ipToSslipHostname(host)
+      : host;
+
     try {
-      const error = await testConnection(host, password, protocol);
+      const error = await testConnection(effectiveHost, password, protocol);
       if (error) {
         setFormError(error);
         return;
       }
 
       // If a connection to this host already exists, switch to it
-      const existing = entries.find((e) => e.host === host);
+      const existing = entries.find((e) => e.host === effectiveHost);
       if (existing) {
         // Update password/protocol in case they changed
         if (existing.password !== password || existing.protocol !== protocol) {
@@ -145,7 +151,7 @@ export function RemoteProduct() {
       }
 
       const id = crypto.randomUUID();
-      setEntries((prev) => [...prev, { id, host, password, protocol, status: 'idle' }]);
+      setEntries((prev) => [...prev, { id, host: effectiveHost, password, protocol, status: 'idle' }]);
       setActiveId(id);
       setShowForm(false);
     } catch {
@@ -197,10 +203,12 @@ export function RemoteProduct() {
     // Create a connection entry for each found port, select the latest (highest port)
     let latestId: string | null = null;
     let latestPort = -1;
+    const shouldRewrite = protocol === 'https' && isRawPrivateIp(host);
     setEntries((prev) => {
       const next = [...prev];
       for (const port of progress.found) {
-        const hostWithPort = `${host}:${port}`;
+        const rawHostWithPort = `${host}:${port}`;
+        const hostWithPort = shouldRewrite ? ipToSslipHostname(rawHostWithPort) : rawHostWithPort;
         const existing = next.find((e) => e.host === hostWithPort);
         if (existing) {
           // Update credentials if needed

src/pages/RemoteSession.tsx

@@ -4,6 +4,7 @@ import { getMixedContentErrorHint } from '../bridge/connection';
 import { WebBridge } from '../bridge/transport';
 import type { ReconnectionState } from '../bridge/types';
 import type { Protocol } from '../bridge/utils';
+import { extractSslipIp } from '../bridge/utils';
 import WebviewApp from '@webview/App';
 import './RemoteSession.css';
 
@@ -181,12 +182,19 @@ export function RemoteSession({ host, password, protocol, lastChatId, onStatusCh
   }
 
   // --- Connecting state ---
+  // Show the embedded IP instead of the full sslip hostname for readability
+  const [hostPart, port] = host.split(':');
+  const displayIp = extractSslipIp(hostPart);
+  const displayHost = displayIp
+    ? (port ? `${displayIp}:${port}` : displayIp)
+    : host;
+
   return (
     <SessionErrorBoundary>
       <div className="remote-session-status">
         <div className="remote-session-connecting">
           <div className="remote-session-spinner" />
-          <span>Connecting to {host}…</span>
+          <span>Connecting to {displayHost}…</span>
         </div>
       </div>
     </SessionErrorBoundary>