UI polish: online/offline label, select mode, font size for previews, tunnel cleanup

- Header: show online/offline text with color next to status dot (always visible)
- Code editor: Select mode toggle for mobile text selection (read-only Monaco)
- Font size control now applies to markdown and notebook previews
- DNS tip in README wrapped in collapsible details element
- Browser tabs: closing a tab stops its port tunnel and logs cleanup
- Terminal action buttons: scroll-aware long press (no accidental fires)

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

Author: davindicode

README.md

@@ -53,38 +53,35 @@ 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
-> ```
+<details>
+<summary><strong>DNS tip:</strong> Tunnel URLs not resolving? Set your DNS to 1.1.1.1</summary>
+
+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
+networksetup -setdnsservers Wi-Fi 1.1.1.1 1.0.0.1
+sudo dscacheutil -flushcache && sudo killall -HUP mDNSResponder
+# To revert: networksetup -setdnsservers Wi-Fi empty
+```
+
+**Linux (systemd-resolved):**
+```bash
+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
+Get-NetAdapter | Select Name, Status
+Set-DnsClientServerAddress -InterfaceAlias "Wi-Fi" -ServerAddresses 1.1.1.1,1.0.0.1
+ipconfig /flushdns
+# To revert: Set-DnsClientServerAddress -InterfaceAlias "Wi-Fi" -ResetServerAddresses
+```
+</details>
 
 ## Scripts
 

app/components/Header.tsx

@@ -12,10 +12,9 @@ export default function Header() {
       <div className="flex items-center gap-2">
         <span
           className={`w-2 h-2 rounded-full ${connected ? "bg-green-500" : "bg-red-500"}`}
-          title={connected ? "Connected" : "Disconnected"}
         />
-        <span className="text-xs text-gray-400 hidden sm:inline">
-          {connected ? "Connected" : "Disconnected"}
+        <span className={`text-xs ${connected ? "text-green-500" : "text-red-400"}`}>
+          {connected ? "online" : "offline"}
         </span>
       </div>
     </header>

app/components/files/CodeEditor.tsx

@@ -52,15 +52,16 @@ function getLanguage(path: string): string {
   return map[ext] || "plaintext";
 }
 
-function MarkdownPreview({ content }: { content: string }) {
+function MarkdownPreview({ content, fontSize }: { content: string; fontSize: number }) {
   const html = useMemo(() => {
     marked.setOptions({ breaks: true, gfm: true });
     return marked.parse(content) as string;
   }, [content]);
 
   return (
     <div
-      className="prose prose-invert prose-sm max-w-none p-4 overflow-auto h-full bg-[#0d0d1a]"
+      className="prose prose-invert max-w-none p-4 overflow-auto h-full bg-[#0d0d1a]"
+      style={{ fontSize: `${fontSize}px` }}
       dangerouslySetInnerHTML={{ __html: html }}
     />
   );
@@ -97,7 +98,7 @@ function joinSource(s: string | string[] | undefined): string {
   return Array.isArray(s) ? s.join("") : s;
 }
 
-function NotebookPreview({ content }: { content: string }) {
+function NotebookPreview({ content, fontSize }: { content: string; fontSize: number }) {
   const cells = useMemo(() => {
     try {
       const nb = JSON.parse(content);
@@ -116,7 +117,7 @@ function NotebookPreview({ content }: { content: string }) {
   }
 
   return (
-    <div className="overflow-auto h-full bg-[#0d0d1a] p-4 space-y-3">
+    <div className="overflow-auto h-full bg-[#0d0d1a] p-4 space-y-3" style={{ fontSize: `${fontSize}px` }}>
       {cells.map((cell, i) => (
         <div key={i} className="rounded border border-gray-700 overflow-hidden">
           {/* Cell header */}
@@ -192,6 +193,7 @@ export default function CodeEditor({ path, content, onSave, onClose }: CodeEdito
   const [value, setValue] = useState(content);
   const [dirty, setDirty] = useState(false);
   const [mode, setMode] = useState<"edit" | "preview">(canPreview ? "preview" : "edit");
+  const [selectMode, setSelectMode] = useState(false);
   const [editorFontSize, setEditorFontSize] = useState(6);
 
   const handleChange = (v: string | undefined) => {
@@ -236,6 +238,20 @@ export default function CodeEditor({ path, content, onSave, onClose }: CodeEdito
               </button>
             </div>
           )}
+          {/* Select mode toggle (for mobile text selection) */}
+          {mode === "edit" && (
+            <button
+              onClick={() => setSelectMode((s) => !s)}
+              className={`px-2 py-0.5 text-xs rounded border transition-colors ${
+                selectMode
+                  ? "bg-yellow-600 text-white border-yellow-500"
+                  : "text-gray-400 hover:text-white border-gray-700"
+              }`}
+              title={selectMode ? "Exit select mode (read-only)" : "Select mode (read-only, enables text selection)"}
+            >
+              Select
+            </button>
+          )}
           {/* Font size */}
           <div className="flex items-center border border-gray-700 rounded overflow-hidden">
             <button
@@ -283,11 +299,11 @@ export default function CodeEditor({ path, content, onSave, onClose }: CodeEdito
       <div className="flex-1 min-h-0">
         {mode === "preview" && canPreview ? (
           ext === "ipynb" ? (
-            <NotebookPreview content={value} />
+            <NotebookPreview content={value} fontSize={editorFontSize} />
           ) : ext === "html" || ext === "htm" ? (
             <HtmlPreview content={value} />
           ) : (
-            <MarkdownPreview content={value} />
+            <MarkdownPreview content={value} fontSize={editorFontSize} />
           )
         ) : (
           <Suspense
@@ -312,7 +328,9 @@ export default function CodeEditor({ path, content, onSave, onClose }: CodeEdito
                 automaticLayout: true,
                 selectionHighlight: true,
                 occurrencesHighlight: "singleFile",
-                dragAndDrop: true,
+                dragAndDrop: !selectMode,
+                readOnly: selectMode,
+                domReadOnly: selectMode,
               }}
             />
           </Suspense>

app/components/terminal/InputBox.tsx

@@ -85,7 +85,7 @@ const GROUPS: QuickKeyGroup[] = [
       { label: "o pane", key: "\x02o", title: "Next pane" },
       { label: "x kill", key: "\x02x", title: "Kill pane" },
       { label: "z zoom", key: "\x02z", title: "Toggle zoom pane" },
-      { label: "[ scroll", key: "\x02[", title: "Enter scroll/copy mode (q to exit)" },
+      { label: "[ scroll", key: "\x02[", title: "Enter scroll/copy mode (Esc to exit)" },
       { label: "] paste", key: "\x02]", title: "Paste from tmux buffer" },
       { label: ", rename", key: "\x02,", title: "Rename window" },
       { label: "w list", key: "\x02w", title: "List windows" },

app/stores/browserStore.ts

@@ -1,4 +1,5 @@
 import { create } from "zustand";
+import { getSocket } from "~/lib/socket";
 
 export interface BrowserTab {
   id: string;
@@ -34,6 +35,7 @@ export const useBrowserStore = create<BrowserState>((set, get) => ({
 
   removeTab: (id) => {
     const { tabs, activeTabId } = get();
+    const removed = tabs.find((t) => t.id === id);
     const newTabs = tabs.filter((t) => t.id !== id);
     let newActive = activeTabId;
     if (activeTabId === id) {
@@ -43,6 +45,13 @@ export const useBrowserStore = create<BrowserState>((set, get) => ({
         : null;
     }
     set({ tabs: newTabs, activeTabId: newActive });
+    // Stop tunnel if no other tab uses this port
+    if (removed?.port) {
+      const portStillUsed = newTabs.some((t) => t.port === removed.port);
+      if (!portStillUsed) {
+        getSocket().emit("stop_port_tunnel", { port: parseInt(removed.port, 10) });
+      }
+    }
   },
 
   setActiveTab: (id) => set({ activeTabId: id }),