Cloudflare tunnels, cross-platform start.sh, terminal UX improvements

- Auto-install cloudflared on macOS/Linux/Windows, download to .bin/ locally
- Per-port cloudflare tunnels for browser preview (open in new tab)
- Tunnel cleanup on client disconnect and script exit (trap)
- Cross-platform shell detection for node-pty (zsh/bash/cmd.exe)
- macOS quarantine flag cleanup for node-pty spawn-helper
- Terminal input: Enter creates newlines, Send button sends, auto-grow textarea
- Action buttons: long-press repeat with scroll detection (no accidental fires)
- Tmux: scroll/copy mode button, paste buffer button
- DNS troubleshooting guide in README with commands for all OSes
- Strip X-Frame-Options in proxy, cache proxy instances per port

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: davindicode

.gitignore

@@ -15,6 +15,9 @@
 .idea/
 Thumbs.db
 
+# Local binaries (cloudflared etc.)
+/.bin/
+
 # Logs
 *.log
 /tmp/

README.md

@@ -53,6 +53,39 @@ pnpm dev
 
 The `start.sh` script installs dependencies if needed, builds the app, starts the server, and launches a Cloudflare Quick Tunnel — printing a public URL you can open on any device.
 
+> **DNS tip:** Quick tunnel URLs (e.g. `xxxx.trycloudflare.com`) resolve instantly on Cloudflare DNS but may take time on ISP/router DNS servers, or fail entirely if a stale NXDOMAIN gets cached. Set your DNS to **1.1.1.1** (Cloudflare) for instant resolution — it's faster and more reliable than most ISP DNS:
+>
+> **macOS:**
+> ```bash
+> # Set DNS for Wi-Fi (most common)
+> networksetup -setdnsservers Wi-Fi 1.1.1.1 1.0.0.1
+> # Flush DNS cache
+> sudo dscacheutil -flushcache && sudo killall -HUP mDNSResponder
+> # To revert to automatic/router DNS:
+> # networksetup -setdnsservers Wi-Fi empty
+> ```
+>
+> **Linux (systemd-resolved):**
+> ```bash
+> # Find your interface name (e.g. eth0, wlan0)
+> resolvectl dns $(ip route show default | awk '{print $5}') 1.1.1.1 1.0.0.1
+> # Or permanently via /etc/systemd/resolved.conf:
+> # [Resolve]
+> # DNS=1.1.1.1 1.0.0.1
+> # sudo systemctl restart systemd-resolved
+> ```
+>
+> **Windows (PowerShell as Admin):**
+> ```powershell
+> # Find your interface (e.g. "Wi-Fi" or "Ethernet")
+> Get-NetAdapter | Select Name, Status
+> # Set DNS
+> Set-DnsClientServerAddress -InterfaceAlias "Wi-Fi" -ServerAddresses 1.1.1.1,1.0.0.1
+> # Flush DNS cache
+> ipconfig /flushdns
+> # To revert: Set-DnsClientServerAddress -InterfaceAlias "Wi-Fi" -ResetServerAddresses
+> ```
+
 ## Scripts
 
 | Command | Description |
@@ -87,7 +120,7 @@ React Router v7, Express, Socket.IO, node-pty, xterm.js, Monaco Editor, Zustand,
 - **Node.js** 20+
 - **pnpm** (package manager)
 - **C compiler** for node-pty on Linux (`apt install build-essential`)
-- **cloudflared** (optional) for remote access via Cloudflare tunnel — [install guide](https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/downloads/)
+- **cloudflared** (auto-installed by `start.sh` if not found) for remote access via Cloudflare tunnel
 
 ## License
 

app/components/browser/BrowserPage.tsx

@@ -1,11 +1,78 @@
 import { useState, useRef, useEffect, useCallback } from "react";
 import { useBrowserStore, type BrowserTab } from "~/stores/browserStore";
 import { isPortBlocked } from "~/lib/constants";
+import { getSocket } from "~/lib/socket";
 
-interface ConsoleEntry {
-  method: string;
-  args: string[];
-  timestamp: number;
+// Cache tunnel URLs across renders
+const tunnelCache = new Map<number, string>();
+
+type TunnelState =
+  | { status: "idle" }
+  | { status: "connecting" }
+  | { status: "ready"; url: string }
+  | { status: "error"; message: string };
+
+function usePortTunnel(port: string | undefined): {
+  state: TunnelState;
+  retry: () => void;
+} {
+  const [state, setState] = useState<TunnelState>({ status: "idle" });
+  const [retryCount, setRetryCount] = useState(0);
+
+  const retry = useCallback(() => {
+    if (!port) return;
+    tunnelCache.delete(parseInt(port, 10));
+    setState({ status: "connecting" });
+    setRetryCount((c) => c + 1);
+  }, [port]);
+
+  useEffect(() => {
+    if (!port) {
+      setState({ status: "idle" });
+      return;
+    }
+
+    const portNum = parseInt(port, 10);
+    const cached = tunnelCache.get(portNum);
+    if (cached) {
+      setState({ status: "ready", url: cached });
+      return;
+    }
+
+    setState({ status: "connecting" });
+    const socket = getSocket();
+
+    const onReady = (data: { port: number; url: string }) => {
+      if (data.port === portNum) {
+        tunnelCache.set(portNum, data.url);
+        setState({ status: "ready", url: data.url });
+      }
+    };
+    const onError = (data: { port: number; error: string }) => {
+      if (data.port === portNum) {
+        setState({ status: "error", message: data.error });
+      }
+    };
+    const onDied = (data: { port: number }) => {
+      if (data.port === portNum) {
+        tunnelCache.delete(portNum);
+        setState({ status: "error", message: "Tunnel disconnected" });
+      }
+    };
+
+    socket.on("port_tunnel_ready", onReady);
+    socket.on("port_tunnel_error", onError);
+    socket.on("port_tunnel_died", onDied);
+    socket.emit("request_port_tunnel", { port: portNum });
+
+    return () => {
+      socket.off("port_tunnel_ready", onReady);
+      socket.off("port_tunnel_error", onError);
+      socket.off("port_tunnel_died", onDied);
+    };
+  }, [port, retryCount]);
+
+  return { state, retry };
 }
 
 function TabInput({ tab }: { tab: BrowserTab }) {
@@ -60,78 +127,81 @@ function TabInput({ tab }: { tab: BrowserTab }) {
   );
 }
 
-const METHOD_COLORS: Record<string, string> = {
-  log: "text-gray-300",
-  info: "text-blue-400",
-  warn: "text-yellow-400",
-  error: "text-red-400",
-  debug: "text-gray-500",
-};
-
-function ConsolePanel({ entries, onClear }: { entries: ConsoleEntry[]; onClear: () => void }) {
-  const bottomRef = useRef<HTMLDivElement>(null);
+function PortTunnelView({ tab }: { tab: BrowserTab }) {
+  const { state, retry } = usePortTunnel(tab.port);
+  const [copied, setCopied] = useState(false);
 
-  useEffect(() => {
-    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [entries.length]);
+  const handleCopy = (url: string) => {
+    navigator.clipboard.writeText(url);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
 
   return (
-    <div className="flex flex-col h-full border-t border-gray-700 bg-[#0d0d1a]">
-      <div className="flex items-center justify-between px-3 py-1 bg-[#16162a] border-b border-gray-700 shrink-0">
-        <span className="text-xs text-gray-400 font-medium">Console</span>
-        <div className="flex items-center gap-2">
-          <span className="text-[10px] text-gray-500">{entries.length} messages</span>
+    <div className="flex flex-col items-center justify-center h-full bg-[#0d0d1a] gap-4">
+      {state.status === "connecting" && (
+        <>
+          <svg className="w-10 h-10 animate-spin text-blue-500" fill="none" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+          </svg>
+          <span className="text-sm text-gray-400">Starting tunnel for localhost:{tab.port}...</span>
+          <span className="text-xs text-gray-600">This may take a few seconds</span>
+        </>
+      )}
+
+      {state.status === "ready" && (
+        <>
+          <svg className="w-10 h-10 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={1.5}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m9.86-2.06a4.5 4.5 0 00-6.364-6.364L4.5 8.743" />
+          </svg>
+          <span className="text-sm text-gray-300">localhost:{tab.port}</span>
+          <a
+            href={state.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-4.5-6H18m0 0v4.5m0-4.5L10.5 13.5" />
+            </svg>
+            Open in new tab
+          </a>
           <button
-            onClick={onClear}
-            className="text-[10px] text-gray-500 hover:text-white transition-colors"
+            onClick={() => handleCopy(state.url)}
+            className="text-xs text-gray-500 hover:text-gray-300 transition-colors flex items-center gap-1"
+            title="Copy URL"
           >
-            Clear
+            <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9.75a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />
+            </svg>
+            {copied ? "Copied!" : state.url}
           </button>
-        </div>
-      </div>
-      <div className="flex-1 overflow-y-auto p-2 font-mono text-xs space-y-0.5">
-        {entries.length === 0 ? (
-          <span className="text-gray-600">No console output yet</span>
-        ) : (
-          entries.map((entry, i) => (
-            <div key={i} className={`flex gap-2 ${METHOD_COLORS[entry.method] || "text-gray-300"}`}>
-              <span className="text-gray-600 shrink-0 w-12 text-right">
-                {new Date(entry.timestamp).toLocaleTimeString([], { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" })}
-              </span>
-              <span className="shrink-0 w-10 text-right opacity-60">{entry.method}</span>
-              <span className="break-all whitespace-pre-wrap">{entry.args.join(" ")}</span>
-            </div>
-          ))
-        )}
-        <div ref={bottomRef} />
-      </div>
+        </>
+      )}
+
+      {state.status === "error" && (
+        <>
+          <svg className="w-10 h-10 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={1.5}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+          </svg>
+          <span className="text-sm text-red-400">{state.message}</span>
+          <button
+            onClick={retry}
+            className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm font-medium transition-colors"
+          >
+            Retry
+          </button>
+        </>
+      )}
     </div>
   );
 }
 
 export default function BrowserPage() {
-  const { tabs, activeTabId, addTab, removeTab, setActiveTab, refreshTab } = useBrowserStore();
+  const { tabs, activeTabId, addTab, removeTab, setActiveTab } = useBrowserStore();
   const activeTab = tabs.find((t) => t.id === activeTabId);
 
-  const [showConsole, setShowConsole] = useState(false);
-  const [consoleEntries, setConsoleEntries] = useState<ConsoleEntry[]>([]);
-
-  // Listen for postMessage from proxied iframes
-  useEffect(() => {
-    const handler = (e: MessageEvent) => {
-      if (e.data?.type === "proxy-console") {
-        setConsoleEntries((prev) => [
-          ...prev,
-          { method: e.data.method, args: e.data.args, timestamp: e.data.timestamp },
-        ]);
-      }
-    };
-    window.addEventListener("message", handler);
-    return () => window.removeEventListener("message", handler);
-  }, []);
-
-  const clearConsole = useCallback(() => setConsoleEntries([]), []);
-
   return (
     <div className="flex flex-col h-full min-h-0">
       {/* Tab bar */}
@@ -152,28 +222,6 @@ export default function BrowserPage() {
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9" />
               </svg>
               <span>{tab.port ? `:${tab.port}` : "new"}</span>
-              {isActive && tab.port && (
-                <>
-                  <button
-                    onClick={(e) => { e.stopPropagation(); refreshTab(tab.id); }}
-                    className="p-0.5 rounded hover:bg-gray-600 text-gray-500 hover:text-gray-200 transition-colors"
-                    title="Refresh"
-                  >
-                    <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
-                      <path strokeLinecap="round" strokeLinejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-                    </svg>
-                  </button>
-                  <button
-                    onClick={(e) => { e.stopPropagation(); setShowConsole(!showConsole); }}
-                    className={`p-0.5 rounded hover:bg-gray-600 transition-colors ${showConsole ? "text-blue-400" : "text-gray-500 hover:text-gray-200"}`}
-                    title="Toggle console"
-                  >
-                    <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
-                      <path strokeLinecap="round" strokeLinejoin="round" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                    </svg>
-                  </button>
-                </>
-              )}
               <button
                 onClick={(e) => { e.stopPropagation(); removeTab(tab.id); }}
                 className="p-0.5 rounded hover:bg-gray-600 text-gray-500 hover:text-gray-200 transition-colors"
@@ -198,40 +246,18 @@ export default function BrowserPage() {
       </div>
 
       {/* Content */}
-      <div className={`flex-1 relative min-h-0 ${showConsole ? "flex flex-col" : ""}`}>
+      <div className="flex-1 min-h-0">
         {!activeTab ? (
           <div className="flex flex-col items-center justify-center h-full bg-[#0d0d1a] text-gray-500 gap-3">
             <svg className="w-12 h-12 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
             </svg>
-            <span className="text-sm">Click + to preview a localhost port</span>
+            <span className="text-sm">Click + to tunnel a localhost port</span>
           </div>
         ) : !activeTab.port ? (
           <TabInput tab={activeTab} />
         ) : (
-          <>
-            <div className={showConsole ? "flex-1 relative min-h-0" : "absolute inset-0"}>
-              {tabs.filter((t) => t.port).map((tab) => (
-                <div
-                  key={tab.id}
-                  className="absolute inset-0"
-                  style={{ visibility: tab.id === activeTabId ? "visible" : "hidden" }}
-                >
-                  <iframe
-                    key={`${tab.port}-${tab.refreshKey}`}
-                    src={`/proxy/${tab.port}/`}
-                    className="w-full h-full border-0 bg-[#0d0d1a]"
-                    title={`localhost:${tab.port}`}
-                  />
-                </div>
-              ))}
-            </div>
-            {showConsole && (
-              <div className="h-[40%] shrink-0">
-                <ConsolePanel entries={consoleEntries} onClear={clearConsole} />
-              </div>
-            )}
-          </>
+          <PortTunnelView tab={activeTab} />
         )}
       </div>
     </div>