termbeam 0.0.9 → 0.1.1

package/README.md

@@ -13,7 +13,7 @@ I built this because I kept needing to run quick commands on my dev machine whil
 
 [Full documentation](https://dorlugasigal.github.io/TermBeam/)
 
-https://github.com/user-attachments/assets/c91ca15d-0c84-400f-bbfa-3d58d1be07ee
+https://github.com/user-attachments/assets/9dd4f3d7-f017-4314-9b3a-f6a5688e3671
 
 ## Quick Start
 
@@ -30,19 +30,33 @@ termbeam
 
 Scan the QR code printed in your terminal, or open the URL on any device.
 
-### Password protection (recommended)
+### Secure by default
 
-```bash
-termbeam --generate-password
+TermBeam starts with a tunnel and auto-generated password out of the box — just run `termbeam` and scan the QR code.
 
-# or set your own
-termbeam --password mysecret
+```bash
+termbeam                        # tunnel + auto-password (default)
+termbeam --password mysecret    # use a specific password
+termbeam --no-tunnel            # LAN-only (no tunnel)
+termbeam --no-password          # disable password protection
 ```
 
 ## Features
 
-- **Mobile-first UI** with on-screen touch bar (arrow keys, Tab, Ctrl shortcuts, Esc) and swipe-to-delete session management
-- **Multiple sessions** running simultaneously, managed from a single hub page — shows connected client count per session
+- **Mobile-first UI** with on-screen touch bar (arrow keys, Tab, Enter, Ctrl shortcuts, Esc) and touch-optimized controls
+- **Copy/paste support** — Copy button opens text overlay for finger-selectable terminal content; Paste button with clipboard API + fallback modal
+- **Image paste** — paste images from clipboard, uploaded to server
+- **Tabbed multi-session terminal** — open, switch, and manage multiple sessions from a single tab bar with drag-to-reorder
+- **Split view** — view two sessions side-by-side (horizontal on desktop, vertical on mobile)
+- **Session colors** — assign a color to each session for quick identification
+- **Activity indicators** — see how recently each session had output (e.g. "3s ago", "5m ago")
+- **Tab previews** — hover (desktop) or long-press (mobile) a tab to preview the last few lines of output
+- **Side panel** (mobile) — slide-out session list with output previews for quick switching
+- **Create sessions anywhere** — new session modal available from both the hub page and the terminal page
+- **Touch scrolling** — swipe to scroll through terminal history
+- **Share button** — share the TermBeam URL via Web Share API, clipboard, or legacy copy fallback (works over HTTP)
+- **Refresh button** — clear PWA/service worker cache and reload to get the latest version
+- **iPhone PWA safe area** — full support for `viewport-fit=cover` and safe area insets on notched devices
 - **Password auth** with token-based cookies and rate-limited login
 - **Folder browser** to pick working directories without typing paths
 - **Initial command** — optionally launch a session straight into `htop`, `vim`, or any command
@@ -55,11 +69,14 @@ termbeam --password mysecret
 ## Remote Access
 
 ```bash
-# One-off tunnel (deleted on shutdown)
-termbeam --tunnel --generate-password
+# Tunnel is on by default
+termbeam
 
 # Persisted tunnel (stable URL you can bookmark, reused across restarts, 30-day expiry)
-termbeam --persisted-tunnel --generate-password
+termbeam --persisted-tunnel
+
+# LAN-only (no tunnel)
+termbeam --no-tunnel
 ```
 
 Requires the [Dev Tunnels CLI](https://learn.microsoft.com/en-us/azure/developer/dev-tunnels/get-started):
@@ -78,20 +95,22 @@ termbeam --port 8080              # custom port (default: 3456)
 termbeam --host 127.0.0.1        # restrict to localhost (default: 0.0.0.0)
 ```
 
-| Flag                  | Description                              | Default     |
-| --------------------- | ---------------------------------------- | ----------- |
-| `--password <pw>`     | Set access password                      | None        |
-| `--generate-password` | Auto-generate a secure password          | —           |
-| `--tunnel`            | Create an ephemeral devtunnel URL        | Off         |
-| `--persisted-tunnel`  | Create a reusable devtunnel URL          | Off         |
-| `--port <port>`       | Server port                              | `3456`      |
-| `--host <addr>`       | Bind address                             | `0.0.0.0`   |
+| Flag                  | Description                              | Default          |
+| --------------------- | ---------------------------------------- | ---------------- |
+| `--password <pw>`     | Set access password (also accepts `--password=<pw>`) | Auto-generated |
+| `--no-password`       | Disable password                         | —                |
+| `--generate-password` | Auto-generate a secure password          | On               |
+| `--tunnel`            | Create an ephemeral devtunnel URL        | On               |
+| `--no-tunnel`         | Disable tunnel (LAN-only)                | —                |
+| `--persisted-tunnel`  | Create a reusable devtunnel URL          | Off              |
+| `--port <port>`       | Server port                              | `3456`           |
+| `--host <addr>`       | Bind address                             | `0.0.0.0`        |
 
-Environment variables: `PORT`, `TERMBEAM_PASSWORD`, `TERMBEAM_CWD` (see [Configuration docs](https://dorlugasigal.github.io/TermBeam/configuration/)).
+Environment variables: `PORT`, `TERMBEAM_PASSWORD`, `TERMBEAM_CWD`, `SHELL` (Unix fallback), `COMSPEC` (Windows fallback). See [Configuration docs](https://dorlugasigal.github.io/TermBeam/configuration/).
 
 ## Security
 
-TermBeam binds to all interfaces (`0.0.0.0`) by default, so it's accessible on your local network out of the box. **Always set a password** when running on a shared network, or pass `--host 127.0.0.1` to restrict access to your machine only.
+TermBeam auto-generates a password and creates a tunnel by default, so your terminal is protected out of the box. Be aware that the tunnel exposes your terminal to the internet — use `--no-tunnel` for LAN-only access, or `--host 127.0.0.1` to restrict to your machine only.
 
 Auth uses secure httpOnly cookies with 24-hour expiry, login is rate-limited to 5 attempts per minute, and security headers (X-Frame-Options, X-Content-Type-Options, etc.) are set on all responses. API clients that can't use cookies can authenticate with an `Authorization: Bearer <password>` header. See the [Security Guide](https://dorlugasigal.github.io/TermBeam/security/) for more.
 
@@ -105,4 +124,4 @@ Contributions welcome — see [CONTRIBUTING.md](CONTRIBUTING.md).
 
 ## Acknowledgments
 
-Special thanks to [@tamirdresher](https://github.com/tamirdresher) for the [blog post](https://www.tamirdresher.com/blog/2026/02/26/squad-remote-control) that inspired the solution idea for this project, and for his [cli-tunnel](https://github.com/tamirdresher/cli-tunnel) implementation.
+Special thanks to [@tamirdresher](https://github.com/tamirdresher) for the [blog post](https://www.tamirdresher.com/blog/2026/02/26/squad-remote-control) that inspired the solution idea for this project, and for his [cli-tunnel](https://github.com/tamirdresher/cli-tunnel) implementation.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "termbeam",
-  "version": "0.0.9",
+  "version": "0.1.1",
   "description": "Beam your terminal to any device — mobile-optimized web terminal with multi-session support",
   "main": "src/server.js",
   "bin": {

package/public/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
     />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="mobile-web-app-capable" content="yes" />
@@ -85,6 +85,28 @@
         color: var(--text-secondary);
         margin-top: 4px;
       }
+      .header-btn {
+        position: absolute;
+        top: 16px;
+        background: none;
+        border: 1px solid var(--border);
+        color: var(--text-dim);
+        width: 32px;
+        height: 32px;
+        border-radius: 8px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 16px;
+        transition: color 0.15s, border-color 0.15s, background 0.15s;
+        -webkit-tap-highlight-color: transparent;
+      }
+      .header-btn:hover {
+        color: var(--text);
+        border-color: var(--border-subtle);
+        background: var(--border);
+      }
       .theme-toggle {
         position: absolute;
         top: 16px;
@@ -111,7 +133,7 @@
 
       .sessions-list {
         padding: 16px;
-        padding-bottom: 80px;
+        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
         display: flex;
         flex-direction: column;
         gap: 12px;
@@ -235,9 +257,9 @@
 
       .new-session {
         position: fixed;
-        bottom: 16px;
-        left: 16px;
-        right: 16px;
+        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
+        left: calc(16px + env(safe-area-inset-left, 0px));
+        right: calc(16px + env(safe-area-inset-right, 0px));
         padding: 14px;
         background: var(--accent);
         color: #ffffff;
@@ -250,7 +272,6 @@
         z-index: 50;
         transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
         box-shadow: 0 2px 8px rgba(0, 120, 212, 0.3);
-        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
       }
       .new-session:hover {
         background: var(--accent-hover);
@@ -563,12 +584,39 @@
         background: var(--accent-active);
         transform: scale(0.98);
       }
+
+      .color-picker {
+        display: flex;
+        gap: 8px;
+        padding: 6px 0;
+        flex-wrap: wrap;
+      }
+      .color-swatch {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        border: 3px solid transparent;
+        cursor: pointer;
+        transition: border-color 0.15s, transform 0.1s;
+        -webkit-tap-highlight-color: transparent;
+        padding: 0;
+        outline: none;
+      }
+      .color-swatch:hover {
+        transform: scale(1.1);
+      }
+      .color-swatch.selected {
+        border-color: var(--text);
+        transform: scale(1.15);
+      }
     </style>
   </head>
   <body>
     <div class="header">
       <h1>📡 Term<span>Beam</span></h1>
       <p>Beam your terminal to any device · <span id="version" style="color: var(--accent)"></span></p>
+      <button class="header-btn" id="share-btn" style="right: 96px;top:16px" title="Share link"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg></button>
+      <button class="header-btn" id="refresh-btn" style="right: 56px;top:16px" title="Refresh app"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg></button>
       <button class="theme-toggle" id="theme-toggle" title="Toggle theme"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button>
     </div>
 
@@ -586,9 +634,20 @@
         </select>
         <label for="sess-cmd">Initial Command <span style="color:var(--text-muted);font-weight:normal">(optional)</span></label>
         <input type="text" id="sess-cmd" placeholder="e.g. copilot, htop, vim" />
+        <label>Color</label>
+        <div class="color-picker" id="color-picker">
+          <button type="button" class="color-swatch selected" data-color="#4a9eff" style="background:#4a9eff" title="Blue"></button>
+          <button type="button" class="color-swatch" data-color="#4ade80" style="background:#4ade80" title="Green"></button>
+          <button type="button" class="color-swatch" data-color="#fbbf24" style="background:#fbbf24" title="Amber"></button>
+          <button type="button" class="color-swatch" data-color="#c084fc" style="background:#c084fc" title="Purple"></button>
+          <button type="button" class="color-swatch" data-color="#f87171" style="background:#f87171" title="Red"></button>
+          <button type="button" class="color-swatch" data-color="#22d3ee" style="background:#22d3ee" title="Cyan"></button>
+          <button type="button" class="color-swatch" data-color="#fb923c" style="background:#fb923c" title="Orange"></button>
+          <button type="button" class="color-swatch" data-color="#f472b6" style="background:#f472b6" title="Pink"></button>
+        </div>
         <label for="sess-cwd">Working Directory</label>
         <div class="cwd-picker">
-          <input type="text" id="sess-cwd" placeholder="/Users/dorlugasigal" />
+          <input type="text" id="sess-cwd" placeholder="Uses server default" />
           <button type="button" class="cwd-browse-btn" id="browse-btn" title="Browse folders">
             <svg
               width="18"
@@ -666,6 +725,15 @@
       const listEl = document.getElementById('sessions-list');
       const modal = document.getElementById('modal');
 
+      function getActivityLabel(ts) {
+        if (!ts) return '';
+        const diff = (Date.now() - ts) / 1000;
+        if (diff < 10) return 'Active now';
+        if (diff < 60) return Math.floor(diff) + 's ago';
+        if (diff < 3600) return Math.floor(diff / 60) + 'm ago';
+        return Math.floor(diff / 3600) + 'h ago';
+      }
+
       async function loadSessions() {
         const res = await fetch('/api/sessions');
         const sessions = await res.json();
@@ -678,19 +746,20 @@
         listEl.innerHTML = sessions
           .map(
             (s) => `
-        <div class="swipe-wrap" data-session-id="${s.id}">
+        <div class="swipe-wrap" data-session-id="${esc(s.id)}">
           <div class="swipe-delete">
-            <button onclick="deleteSession('${s.id}', event)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg><span>Delete</span></button>
+            <button data-delete-id="${esc(s.id)}"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg><span>Delete</span></button>
           </div>
-          <div class="session-card" onclick="location.href='/terminal?id=${s.id}'">
+          <div class="session-card" data-nav-id="${esc(s.id)}">
             <div class="top">
-              <div class="name"><span class="dot"></span>${esc(s.name)}</div>
+              <div class="name"><span class="dot" data-color="${esc(s.color || '')}"></span>${esc(s.name)}</div>
               <span class="pid">PID ${s.pid}</span>
             </div>
             <div class="details">
               <span><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg> ${esc(s.cwd)}</span>
               <span><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg> ${esc(s.shell)}</span>
               <span><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg> ${s.clients} connected</span>
+              <span title="Last activity">${getActivityLabel(s.lastActivity)}</span>
             </div>
             <button class="connect-btn">Connect →</button>
           </div>
@@ -699,8 +768,17 @@
           )
           .join('');
 
-        // Attach swipe handlers after rendering
+        // Attach swipe handlers and click handlers after rendering
         listEl.querySelectorAll('.swipe-wrap').forEach(initSwipe);
+        listEl.querySelectorAll('[data-delete-id]').forEach(btn => {
+          btn.addEventListener('click', (e) => deleteSession(btn.dataset.deleteId, e));
+        });
+        listEl.querySelectorAll('[data-nav-id]').forEach(card => {
+          card.addEventListener('click', () => { location.href = '/terminal?id=' + encodeURIComponent(card.dataset.navId); });
+        });
+        listEl.querySelectorAll('.dot[data-color]').forEach(dot => {
+          dot.style.background = dot.dataset.color || 'var(--success)';
+        });
       }
 
       function esc(str) {
@@ -720,17 +798,28 @@
         if (e.target === modal) modal.classList.remove('visible');
       });
 
+      // Color picker
+      document.getElementById('color-picker').addEventListener('click', (e) => {
+        const swatch = e.target.closest('.color-swatch');
+        if (!swatch) return;
+        document.querySelectorAll('#color-picker .color-swatch').forEach(s => s.classList.remove('selected'));
+        swatch.classList.add('selected');
+      });
+
       document.getElementById('modal-create').addEventListener('click', async () => {
         const name = document.getElementById('sess-name').value.trim();
         const shell = document.getElementById('sess-shell').value.trim();
         const cwd = document.getElementById('sess-cwd').value.trim();
         const initialCommand = document.getElementById('sess-cmd').value.trim();
 
+        const colorEl = document.querySelector('#color-picker .color-swatch.selected');
+        const color = colorEl ? colorEl.dataset.color : null;
         const body = {};
         if (name) body.name = name;
         if (shell) body.shell = shell;
         if (cwd) body.cwd = cwd;
         if (initialCommand) body.initialCommand = initialCommand;
+        if (color) body.color = color;
 
         const res = await fetch('/api/sessions', {
           method: 'POST',
@@ -749,6 +838,10 @@
         try {
           const res = await fetch('/api/shells');
           const data = await res.json();
+          if (data.cwd) {
+            document.getElementById('sess-cwd').placeholder = data.cwd;
+            hubServerCwd = data.cwd;
+          }
           shellSelect.innerHTML = '';
           for (const s of data.shells) {
             const opt = document.createElement('option');
@@ -863,9 +956,10 @@
       const browserBreadcrumb = document.getElementById('browser-breadcrumb');
       const browserPath = document.getElementById('browser-path');
       let currentBrowsePath = '/';
+      let hubServerCwd = '/';
 
       document.getElementById('browse-btn').addEventListener('click', () => {
-        const initial = cwdInput.value.trim() || '/';
+        const initial = cwdInput.value.trim() || hubServerCwd;
         navigateTo(initial);
         browserOverlay.classList.add('visible');
       });
@@ -891,13 +985,19 @@
         try {
           const res = await fetch(`/api/dirs?q=${encodeURIComponent(dir + '/')}`);
           const data = await res.json();
-          if (!data.dirs.length) {
-            browserList.innerHTML = '<div class="browser-empty">No subfolders</div>';
-            return;
+          let items = '';
+          // Add parent (..) entry unless at root
+          const parent = dir.replace(/[/\\][^/\\]+$/, '') || (dir.includes('\\') ? dir.match(/^[A-Za-z]:\\/)?.[0] : '/');
+          if (parent && parent !== dir) {
+            items += `<div class="folder-item" data-path="${esc(parent)}">
+            <span class="folder-icon">📁</span>
+            <span class="folder-name">..</span>
+            <span class="folder-arrow">›</span>
+          </div>`;
           }
-          browserList.innerHTML = data.dirs
+          items += data.dirs
             .map((d) => {
-              const name = d.split('/').pop();
+              const name = d.split(/[/\\]/).pop();
               return `<div class="folder-item" data-path="${esc(d)}">
             <span class="folder-icon">📁</span>
             <span class="folder-name">${esc(name)}</span>
@@ -906,6 +1006,7 @@
             })
             .join('');
 
+          browserList.innerHTML = items || '<div class="browser-empty">No subfolders</div>';
           browserList.querySelectorAll('.folder-item').forEach((el) => {
             el.addEventListener('click', () => navigateTo(el.dataset.path));
           });
@@ -916,13 +1017,15 @@
       }
 
       function renderBreadcrumb(dir) {
-        const parts = dir.split('/').filter(Boolean);
-        let html = `<button class="crumb" data-path="/">/</button>`;
-        let accumulated = '';
+        const sep = dir.includes('\\') ? '\\' : '/';
+        const parts = dir.split(/[/\\]/).filter(Boolean);
+        const isWindows = /^[A-Za-z]:/.test(dir);
+        let html = isWindows ? '' : `<button class="crumb" data-path="/">/</button>`;
+        let accumulated = isWindows ? '' : '';
         parts.forEach((part, i) => {
-          accumulated += '/' + part;
+          accumulated += (i === 0 && isWindows ? '' : sep) + part;
           const isCurrent = i === parts.length - 1;
-          html += `<span class="crumb-sep">›</span>`;
+          if (i > 0 || isWindows) html += `<span class="crumb-sep">›</span>`;
           html += `<button class="crumb${isCurrent ? ' current' : ''}" data-path="${esc(accumulated)}">${esc(part)}</button>`;
         });
         browserBreadcrumb.innerHTML = html;
@@ -942,8 +1045,50 @@
         .catch(() => {});
 
       loadSessions();
+      loadShells();
       setInterval(loadSessions, 3000);
 
+      // Share button
+      function copyToClipboardFallback(text) {
+        const ta = document.createElement('textarea');
+        ta.value = text;
+        ta.style.cssText = 'position:fixed;left:-9999px;top:-9999px';
+        document.body.appendChild(ta);
+        ta.select();
+        try { document.execCommand('copy'); } catch {}
+        document.body.removeChild(ta);
+      }
+
+      function showShareToast(msg) {
+        const toast = document.createElement('div');
+        toast.textContent = msg;
+        toast.style.cssText = 'position:fixed;top:16px;left:50%;transform:translateX(-50%);background:var(--surface);color:var(--text);border:1px solid var(--border);padding:6px 16px;border-radius:8px;font-size:13px;font-weight:600;z-index:200;';
+        document.body.appendChild(toast);
+        setTimeout(() => toast.remove(), 1500);
+      }
+
+      document.getElementById('share-btn').addEventListener('click', async () => {
+        const url = location.href;
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+          try { await navigator.clipboard.writeText(url); showShareToast('Link copied!'); return; } catch {}
+        }
+        copyToClipboardFallback(url);
+        showShareToast('Link copied!');
+      });
+
+      // Refresh button: clear SW cache and reload
+      document.getElementById('refresh-btn').addEventListener('click', async () => {
+        if ('caches' in window) {
+          const keys = await caches.keys();
+          await Promise.all(keys.map(k => caches.delete(k)));
+        }
+        if (navigator.serviceWorker) {
+          const reg = await navigator.serviceWorker.getRegistration();
+          if (reg) await reg.update();
+        }
+        location.reload();
+      });
+
       if ('serviceWorker' in navigator) {
         navigator.serviceWorker.register('/sw.js').catch(() => {});
       }

package/public/sw.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = 'termbeam-v1';
+const CACHE_NAME = 'termbeam-v5';
 const SHELL_URLS = ['/', '/terminal'];
 
 self.addEventListener('install', (event) => {
@@ -20,16 +20,34 @@ self.addEventListener('activate', (event) => {
 self.addEventListener('fetch', (event) => {
   const url = new URL(event.request.url);
 
-  // Don't cache WebSocket upgrades or external resources
+  // Don't cache WebSocket upgrades
   if (
     event.request.mode === 'websocket' ||
     url.protocol === 'ws:' ||
-    url.protocol === 'wss:' ||
-    url.origin !== self.location.origin
+    url.protocol === 'wss:'
   ) {
     return;
   }
 
+  // Cache-first for CDN font files (NerdFont from jsdelivr)
+  if (url.origin !== self.location.origin) {
+    if (url.hostname === 'cdn.jsdelivr.net' && url.pathname.endsWith('.ttf')) {
+      event.respondWith(
+        caches.match(event.request).then((cached) => {
+          if (cached) return cached;
+          return fetch(event.request).then((response) => {
+            if (response.ok) {
+              const clone = response.clone();
+              caches.open(CACHE_NAME).then((cache) => cache.put(event.request, clone));
+            }
+            return response;
+          });
+        })
+      );
+    }
+    return;
+  }
+
   // Network-first for API calls
   if (url.pathname.startsWith('/api/')) {
     event.respondWith(
@@ -38,7 +56,21 @@ self.addEventListener('fetch', (event) => {
     return;
   }
 
-  // Cache-first for static assets
+  // Network-first for HTML pages (always get latest code)
+  if (event.request.mode === 'navigate' || event.request.headers.get('accept')?.includes('text/html')) {
+    event.respondWith(
+      fetch(event.request).then((response) => {
+        if (response.ok) {
+          const clone = response.clone();
+          caches.open(CACHE_NAME).then((cache) => cache.put(event.request, clone));
+        }
+        return response;
+      }).catch(() => caches.match(event.request))
+    );
+    return;
+  }
+
+  // Cache-first for static assets (JS, CSS, images)
   event.respondWith(
     caches.match(event.request).then((cached) => {
       if (cached) return cached;
@@ -49,6 +81,6 @@ self.addEventListener('fetch', (event) => {
         }
         return response;
       });
-    })
+    }).catch(() => new Response('Offline', { status: 503, statusText: 'Service Unavailable' }))
   );
 });