termbeam 1.5.0 → 1.7.0

package/README.md

@@ -15,7 +15,7 @@
 
 TermBeam lets you access your terminal from a phone, tablet, or any browser — no SSH, no port forwarding, no config files. Run one command and scan the QR code.
 
-I built this because I kept needing to run quick commands on my dev machine while away from my desk, and SSH on a phone is painful. TermBeam gives you a real terminal with a touch-friendly UI that actually works on small screens.
+I built this because I kept needing to run quick commands on my dev machine while away from my desk, and SSH on a phone is painful. TermBeam gives you a real terminal with a touch-optimized UI — key bar, swipe scroll, pinch zoom — that actually works on small screens. You get multi-session tabs with split view, terminal search, a command palette, 12 themes, and secure remote access out of the box.
 
 [Full documentation](https://dorlugasigal.github.io/TermBeam/) · [Website](https://termbeam.pages.dev)
 
@@ -26,8 +26,8 @@ https://github.com/user-attachments/assets/9dd4f3d7-f017-4314-9b3a-f6a5688e3671
 <table align="center">
   <tr>
     <td align="center"><img src="docs/assets/screenshots/mobile-session-hub.jpeg" alt="Session hub on mobile" width="250" /></td>
-    <td align="center"><img src="docs/assets/screenshots/mobile-session-preview.jpeg" alt="Session preview on mobile" width="250" /></td>
     <td align="center"><img src="docs/assets/screenshots/mobile-terminal.jpeg" alt="Terminal on mobile" width="250" /></td>
+    <td align="center"><img src="docs/assets/screenshots/mobile-session-preview.jpeg" alt="Session preview on mobile" width="250" /></td>
   </tr>
 </table>
 
@@ -57,36 +57,6 @@ 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, 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); each share gets a fresh auto-login link with a 5-minute share token
-- **QR code auto-login** — scan the QR code to log in automatically without typing the password (share token, 5-minute expiry)
-- **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
-- **Shell detection** — auto-detects your shell on all platforms (PowerShell, cmd, bash, zsh, Git Bash, WSL)
-- **QR code on startup** for instant phone connection
-- **Command completion notifications** — get browser notifications when a command finishes in a background tab; toggle with the bell icon in the toolbar (opt-in, requires browser permission)
-- **Terminal search** — press <kbd>Ctrl+F</kbd> / <kbd>Cmd+F</kbd> to open a search overlay with regex support, powered by xterm.js SearchAddon
-- **Command palette** — press <kbd>Ctrl+K</kbd> / <kbd>Cmd+K</kbd> (or tap the ⚙️ button) to open a slide-out tool panel with categorized actions: Session, Search, View, Share, Notifications, and System
-- **Light/dark theme** with persistent preference
-- **Adjustable font size** via status bar controls, saved across sessions
-- **Port preview** — reverse-proxy a single local web server port and preview it in the browser (HTTP only; no WebSocket/HMR; best with server-rendered apps)
-- **Remote access via [DevTunnel](#remote-access)** — ephemeral or persisted public URLs
-
 ## Remote Access
 
 ```bash

package/package.json

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

package/public/css/themes.css

@@ -0,0 +1,217 @@
+/* TermBeam shared theme variables — imported by index.html and terminal.html */
+
+:root {
+  --bg: #1e1e1e;
+  --surface: #252526;
+  --border: #3c3c3c;
+  --border-subtle: #474747;
+  --text: #d4d4d4;
+  --text-secondary: #858585;
+  --text-dim: #6e6e6e;
+  --text-muted: #555555;
+  --accent: #0078d4;
+  --accent-hover: #1a8ae8;
+  --accent-active: #005a9e;
+  --danger: #f14c4c;
+  --danger-hover: #d73a3a;
+  --success: #89d185;
+  --overlay-bg: rgba(0, 0, 0, 0.85);
+}
+
+[data-theme='light'] {
+  --bg: #ffffff;
+  --surface: #f3f3f3;
+  --border: #e0e0e0;
+  --border-subtle: #d0d0d0;
+  --text: #1e1e1e;
+  --text-secondary: #616161;
+  --text-dim: #767676;
+  --text-muted: #a0a0a0;
+  --accent: #0078d4;
+  --accent-hover: #106ebe;
+  --accent-active: #005a9e;
+  --danger: #e51400;
+  --danger-hover: #c20000;
+  --success: #16825d;
+  --overlay-bg: rgba(0, 0, 0, 0.5);
+}
+
+[data-theme='monokai'] {
+  --bg: #272822;
+  --surface: #1e1f1c;
+  --border: #49483e;
+  --border-subtle: #5c5c4f;
+  --text: #f8f8f2;
+  --text-secondary: #a59f85;
+  --text-dim: #75715e;
+  --text-muted: #5a5854;
+  --accent: #a6e22e;
+  --accent-hover: #b8f53c;
+  --accent-active: #8acc16;
+  --danger: #f92672;
+  --danger-hover: #e0155d;
+  --success: #a6e22e;
+  --overlay-bg: rgba(0, 0, 0, 0.75);
+}
+
+[data-theme='solarized-dark'] {
+  --bg: #002b36;
+  --surface: #073642;
+  --border: #586e75;
+  --border-subtle: #657b83;
+  --text: #839496;
+  --text-secondary: #657b83;
+  --text-dim: #586e75;
+  --text-muted: #4a5a62;
+  --accent: #268bd2;
+  --accent-hover: #379ce3;
+  --accent-active: #1a7abf;
+  --danger: #dc322f;
+  --danger-hover: #c8221f;
+  --success: #859900;
+  --overlay-bg: rgba(0, 0, 0, 0.75);
+}
+
+[data-theme='solarized-light'] {
+  --bg: #fdf6e3;
+  --surface: #eee8d5;
+  --border: #93a1a1;
+  --border-subtle: #839496;
+  --text: #657b83;
+  --text-secondary: #93a1a1;
+  --text-dim: #a0a0a0;
+  --text-muted: #b0b0b0;
+  --accent: #268bd2;
+  --accent-hover: #379ce3;
+  --accent-active: #1a7abf;
+  --danger: #dc322f;
+  --danger-hover: #c8221f;
+  --success: #859900;
+  --overlay-bg: rgba(0, 0, 0, 0.4);
+}
+
+[data-theme='nord'] {
+  --bg: #2e3440;
+  --surface: #3b4252;
+  --border: #434c5e;
+  --border-subtle: #4c566a;
+  --text: #d8dee9;
+  --text-secondary: #b0bac9;
+  --text-dim: #7b88a1;
+  --text-muted: #5c6a85;
+  --accent: #88c0d0;
+  --accent-hover: #9fd4e4;
+  --accent-active: #6aafbf;
+  --danger: #bf616a;
+  --danger-hover: #a84d57;
+  --success: #a3be8c;
+  --overlay-bg: rgba(0, 0, 0, 0.75);
+}
+
+[data-theme='dracula'] {
+  --bg: #282a36;
+  --surface: #343746;
+  --border: #44475a;
+  --border-subtle: #525568;
+  --text: #f8f8f2;
+  --text-secondary: #c1c4d2;
+  --text-dim: #8e92a4;
+  --text-muted: #6272a4;
+  --accent: #bd93f9;
+  --accent-hover: #d0b0ff;
+  --accent-active: #a77de7;
+  --danger: #ff5555;
+  --danger-hover: #e03d3d;
+  --success: #50fa7b;
+  --overlay-bg: rgba(0, 0, 0, 0.75);
+}
+
+[data-theme='github-dark'] {
+  --bg: #0d1117;
+  --surface: #161b22;
+  --border: #30363d;
+  --border-subtle: #3d444d;
+  --text: #c9d1d9;
+  --text-secondary: #8b949e;
+  --text-dim: #6e7681;
+  --text-muted: #484f58;
+  --accent: #58a6ff;
+  --accent-hover: #79b8ff;
+  --accent-active: #388bfd;
+  --danger: #f85149;
+  --danger-hover: #da3633;
+  --success: #3fb950;
+  --overlay-bg: rgba(0, 0, 0, 0.75);
+}
+
+[data-theme='one-dark'] {
+  --bg: #282c34;
+  --surface: #21252b;
+  --border: #3e4452;
+  --border-subtle: #4b5263;
+  --text: #abb2bf;
+  --text-secondary: #7f848e;
+  --text-dim: #5c6370;
+  --text-muted: #4b5263;
+  --accent: #61afef;
+  --accent-hover: #7dc0ff;
+  --accent-active: #4d9ede;
+  --danger: #e06c75;
+  --danger-hover: #c95c67;
+  --success: #98c379;
+  --overlay-bg: rgba(0, 0, 0, 0.75);
+}
+
+[data-theme='catppuccin'] {
+  --bg: #1e1e2e;
+  --surface: #313244;
+  --border: #45475a;
+  --border-subtle: #585b70;
+  --text: #cdd6f4;
+  --text-secondary: #a6adc8;
+  --text-dim: #7f849c;
+  --text-muted: #585b70;
+  --accent: #89b4fa;
+  --accent-hover: #b4d0ff;
+  --accent-active: #5c9de3;
+  --danger: #f38ba8;
+  --danger-hover: #eb7c9d;
+  --success: #a6e3a1;
+  --overlay-bg: rgba(0, 0, 0, 0.75);
+}
+
+[data-theme='gruvbox'] {
+  --bg: #282828;
+  --surface: #3c3836;
+  --border: #504945;
+  --border-subtle: #665c54;
+  --text: #ebdbb2;
+  --text-secondary: #d5c4a1;
+  --text-dim: #a89984;
+  --text-muted: #7c6f64;
+  --accent: #83a598;
+  --accent-hover: #9dbfb4;
+  --accent-active: #6a8f8a;
+  --danger: #fb4934;
+  --danger-hover: #e33826;
+  --success: #b8bb26;
+  --overlay-bg: rgba(0, 0, 0, 0.75);
+}
+
+[data-theme='night-owl'] {
+  --bg: #011627;
+  --surface: #0d2a45;
+  --border: #1d3b53;
+  --border-subtle: #264863;
+  --text: #d6deeb;
+  --text-secondary: #8badc1;
+  --text-dim: #5f7e97;
+  --text-muted: #3f5f7d;
+  --accent: #7fdbca;
+  --accent-hover: #9ff0e0;
+  --accent-active: #62c5b5;
+  --danger: #ef5350;
+  --danger-hover: #d83130;
+  --success: #addb67;
+  --overlay-bg: rgba(0, 0, 0, 0.75);
+}

package/public/index.html

@@ -15,235 +15,56 @@
     />
     <link rel="manifest" href="/manifest.json" />
     <link rel="apple-touch-icon" href="/icons/icon-192.png" />
+    <link rel="stylesheet" href="/css/themes.css" />
     <title>TermBeam — Beam Your Terminal to Any Device</title>
     <style>
       :root {
-        --bg: #1e1e1e;
-        --surface: #252526;
-        --border: #3c3c3c;
-        --border-subtle: #474747;
-        --text: #d4d4d4;
-        --text-secondary: #858585;
-        --text-dim: #6e6e6e;
-        --text-muted: #5a5a5a;
-        --accent: #0078d4;
-        --accent-hover: #1a8ae8;
-        --accent-active: #005a9e;
-        --danger: #f14c4c;
-        --danger-hover: #d73a3a;
-        --success: #89d185;
         --info: #b0b0b0;
         --shadow: rgba(0, 0, 0, 0.15);
-        --overlay-bg: rgba(0, 0, 0, 0.7);
       }
       [data-theme='light'] {
-        --bg: #ffffff;
-        --surface: #f3f3f3;
-        --border: #e0e0e0;
-        --border-subtle: #d0d0d0;
-        --text: #1e1e1e;
-        --text-secondary: #616161;
-        --text-dim: #767676;
-        --text-muted: #a0a0a0;
-        --accent: #0078d4;
-        --accent-hover: #106ebe;
-        --accent-active: #005a9e;
-        --danger: #e51400;
-        --danger-hover: #c20000;
-        --success: #16825d;
         --info: #616161;
         --shadow: rgba(0, 0, 0, 0.06);
-        --overlay-bg: rgba(0, 0, 0, 0.4);
       }
       [data-theme='monokai'] {
-        --bg: #272822;
-        --surface: #1e1f1c;
-        --border: #49483e;
-        --border-subtle: #5c5c4f;
-        --text: #f8f8f2;
-        --text-secondary: #a59f85;
-        --text-dim: #75715e;
-        --text-muted: #5a5854;
-        --accent: #a6e22e;
-        --accent-hover: #b8f53c;
-        --accent-active: #8acc16;
-        --danger: #f92672;
-        --danger-hover: #e0155d;
-        --success: #a6e22e;
         --info: #a59f85;
         --shadow: rgba(0, 0, 0, 0.3);
-        --overlay-bg: rgba(0, 0, 0, 0.75);
       }
       [data-theme='solarized-dark'] {
-        --bg: #002b36;
-        --surface: #073642;
-        --border: #586e75;
-        --border-subtle: #657b83;
-        --text: #839496;
-        --text-secondary: #657b83;
-        --text-dim: #586e75;
-        --text-muted: #4a5a62;
-        --accent: #268bd2;
-        --accent-hover: #379ce3;
-        --accent-active: #1a7abf;
-        --danger: #dc322f;
-        --danger-hover: #c8221f;
-        --success: #859900;
         --info: #657b83;
         --shadow: rgba(0, 0, 0, 0.25);
-        --overlay-bg: rgba(0, 0, 0, 0.75);
       }
       [data-theme='solarized-light'] {
-        --bg: #fdf6e3;
-        --surface: #eee8d5;
-        --border: #93a1a1;
-        --border-subtle: #839496;
-        --text: #657b83;
-        --text-secondary: #93a1a1;
-        --text-dim: #a0a0a0;
-        --text-muted: #b0b0b0;
-        --accent: #268bd2;
-        --accent-hover: #379ce3;
-        --accent-active: #1a7abf;
-        --danger: #dc322f;
-        --danger-hover: #c8221f;
-        --success: #859900;
         --info: #93a1a1;
         --shadow: rgba(0, 0, 0, 0.08);
-        --overlay-bg: rgba(0, 0, 0, 0.4);
       }
       [data-theme='nord'] {
-        --bg: #2e3440;
-        --surface: #3b4252;
-        --border: #434c5e;
-        --border-subtle: #4c566a;
-        --text: #d8dee9;
-        --text-secondary: #b0bac9;
-        --text-dim: #7b88a1;
-        --text-muted: #5c6a85;
-        --accent: #88c0d0;
-        --accent-hover: #9fd4e4;
-        --accent-active: #6aafbf;
-        --danger: #bf616a;
-        --danger-hover: #a84d57;
-        --success: #a3be8c;
         --info: #b0bac9;
         --shadow: rgba(0, 0, 0, 0.2);
-        --overlay-bg: rgba(0, 0, 0, 0.75);
       }
       [data-theme='dracula'] {
-        --bg: #282a36;
-        --surface: #343746;
-        --border: #44475a;
-        --border-subtle: #525568;
-        --text: #f8f8f2;
-        --text-secondary: #c1c4d2;
-        --text-dim: #8e92a4;
-        --text-muted: #6272a4;
-        --accent: #bd93f9;
-        --accent-hover: #d0b0ff;
-        --accent-active: #a77de7;
-        --danger: #ff5555;
-        --danger-hover: #e03d3d;
-        --success: #50fa7b;
         --info: #c1c4d2;
         --shadow: rgba(0, 0, 0, 0.25);
-        --overlay-bg: rgba(0, 0, 0, 0.75);
       }
       [data-theme='github-dark'] {
-        --bg: #0d1117;
-        --surface: #161b22;
-        --border: #30363d;
-        --border-subtle: #3d444d;
-        --text: #c9d1d9;
-        --text-secondary: #8b949e;
-        --text-dim: #6e7681;
-        --text-muted: #484f58;
-        --accent: #58a6ff;
-        --accent-hover: #79b8ff;
-        --accent-active: #388bfd;
-        --danger: #f85149;
-        --danger-hover: #da3633;
-        --success: #3fb950;
         --info: #8b949e;
         --shadow: rgba(0, 0, 0, 0.3);
-        --overlay-bg: rgba(0, 0, 0, 0.75);
       }
       [data-theme='one-dark'] {
-        --bg: #282c34;
-        --surface: #21252b;
-        --border: #3e4452;
-        --border-subtle: #4b5263;
-        --text: #abb2bf;
-        --text-secondary: #7f848e;
-        --text-dim: #5c6370;
-        --text-muted: #4b5263;
-        --accent: #61afef;
-        --accent-hover: #7dc0ff;
-        --accent-active: #4d9ede;
-        --danger: #e06c75;
-        --danger-hover: #c95c67;
-        --success: #98c379;
         --info: #7f848e;
         --shadow: rgba(0, 0, 0, 0.25);
-        --overlay-bg: rgba(0, 0, 0, 0.75);
       }
       [data-theme='catppuccin'] {
-        --bg: #1e1e2e;
-        --surface: #313244;
-        --border: #45475a;
-        --border-subtle: #585b70;
-        --text: #cdd6f4;
-        --text-secondary: #a6adc8;
-        --text-dim: #7f849c;
-        --text-muted: #585b70;
-        --accent: #89b4fa;
-        --accent-hover: #b4d0ff;
-        --accent-active: #5c9de3;
-        --danger: #f38ba8;
-        --danger-hover: #eb7c9d;
-        --success: #a6e3a1;
         --info: #a6adc8;
         --shadow: rgba(0, 0, 0, 0.2);
-        --overlay-bg: rgba(0, 0, 0, 0.75);
       }
       [data-theme='gruvbox'] {
-        --bg: #282828;
-        --surface: #3c3836;
-        --border: #504945;
-        --border-subtle: #665c54;
-        --text: #ebdbb2;
-        --text-secondary: #d5c4a1;
-        --text-dim: #a89984;
-        --text-muted: #7c6f64;
-        --accent: #83a598;
-        --accent-hover: #9dbfb4;
-        --accent-active: #6a8f8a;
-        --danger: #fb4934;
-        --danger-hover: #e33826;
-        --success: #b8bb26;
         --info: #d5c4a1;
         --shadow: rgba(0, 0, 0, 0.25);
-        --overlay-bg: rgba(0, 0, 0, 0.75);
       }
       [data-theme='night-owl'] {
-        --bg: #011627;
-        --surface: #0d2a45;
-        --border: #1d3b53;
-        --border-subtle: #264863;
-        --text: #d6deeb;
-        --text-secondary: #8badc1;
-        --text-dim: #5f7e97;
-        --text-muted: #3f5f7d;
-        --accent: #7fdbca;
-        --accent-hover: #9ff0e0;
-        --accent-active: #62c5b5;
-        --danger: #ef5350;
-        --danger-hover: #d83130;
-        --success: #addb67;
         --info: #8badc1;
         --shadow: rgba(0, 0, 0, 0.3);
-        --overlay-bg: rgba(0, 0, 0, 0.75);
       }
       * {
         margin: 0;
@@ -507,6 +328,32 @@
         transform: scale(0.95);
       }
 
+      .session-card .git-info {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px 10px;
+        font-size: 12px;
+        color: var(--text-secondary);
+        align-items: center;
+      }
+      .session-card .git-info .git-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        background: var(--bg);
+        padding: 2px 8px;
+        border-radius: 4px;
+        transition:
+          background 0.3s,
+          color 0.3s;
+      }
+      .session-card .git-info .git-status-clean {
+        color: var(--success);
+      }
+      .session-card .git-info .git-status-dirty {
+        color: var(--warning, #fbbf24);
+      }
+
       .new-session {
         position: fixed;
         bottom: calc(16px + env(safe-area-inset-bottom, 0px));
@@ -1121,46 +968,12 @@
       </div>
     </div>
 
+    <script src="/js/shared.js"></script>
+    <script src="/js/themes.js"></script>
     <script>
-      // Theme
-      const THEMES = [
-        { id: 'dark', name: 'Dark', bg: '#1e1e1e' },
-        { id: 'light', name: 'Light', bg: '#f3f3f3' },
-        { id: 'monokai', name: 'Monokai', bg: '#272822' },
-        { id: 'solarized-dark', name: 'Solarized Dark', bg: '#002b36' },
-        { id: 'solarized-light', name: 'Solarized Light', bg: '#fdf6e3' },
-        { id: 'nord', name: 'Nord', bg: '#2e3440' },
-        { id: 'dracula', name: 'Dracula', bg: '#282a36' },
-        { id: 'github-dark', name: 'GitHub Dark', bg: '#0d1117' },
-        { id: 'one-dark', name: 'One Dark', bg: '#282c34' },
-        { id: 'catppuccin', name: 'Catppuccin', bg: '#1e1e2e' },
-        { id: 'gruvbox', name: 'Gruvbox', bg: '#282828' },
-        { id: 'night-owl', name: 'Night Owl', bg: '#011627' },
-      ];
-      function getTheme() {
-        return localStorage.getItem('termbeam-theme') || 'dark';
-      }
-      function applyTheme(theme) {
-        document.documentElement.setAttribute('data-theme', theme);
-        const t = THEMES.find((x) => x.id === theme) || THEMES[0];
-        document.querySelector('meta[name="theme-color"]').content = t.bg;
-        localStorage.setItem('termbeam-theme', theme);
-        document.querySelectorAll('.theme-option').forEach((el) => {
-          el.classList.toggle('active', el.dataset.themeOption === theme);
-        });
-      }
-      applyTheme(getTheme());
-      document.getElementById('theme-toggle').addEventListener('click', (e) => {
-        e.stopPropagation();
-        document.getElementById('theme-picker').classList.toggle('open');
-      });
-      document.addEventListener('click', () => {
-        document.getElementById('theme-picker').classList.remove('open');
-      });
+      // Close theme picker when option is selected (index-specific behavior)
       document.querySelectorAll('.theme-option').forEach((el) => {
-        el.addEventListener('click', (e) => {
-          e.stopPropagation();
-          applyTheme(el.dataset.themeOption);
+        el.addEventListener('click', () => {
           document.getElementById('theme-picker').classList.remove('open');
         });
       });
@@ -1204,6 +1017,16 @@
               <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>
+            ${
+              s.git
+                ? `<div class="git-info">
+              <span class="git-badge"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg> ${esc(s.git.branch || 'detached')}</span>
+              ${s.git.provider ? `<span class="git-badge">${esc(s.git.provider)}</span>` : ''}
+              ${s.git.repoName ? `<span class="git-badge">${esc(s.git.repoName)}</span>` : ''}
+              ${s.git.status ? `<span class="git-badge ${s.git.status.clean ? 'git-status-clean' : 'git-status-dirty'}">${s.git.status.clean ? '✓ clean' : esc(s.git.status.summary)}</span>` : ''}
+            </div>`
+                : ''
+            }
             <button class="connect-btn">Connect →</button>
           </div>
         </div>
@@ -1226,12 +1049,6 @@
         });
       }
 
-      function esc(str) {
-        const d = document.createElement('div');
-        d.textContent = str;
-        return d.innerHTML;
-      }
-
       document.getElementById('new-session-btn').addEventListener('click', () => {
         loadShells();
         modal.classList.add('visible');
@@ -1504,21 +1321,6 @@
       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.focus();
-        ta.select();
-        let ok = false;
-        try {
-          ok = document.execCommand('copy');
-        } catch {}
-        document.body.removeChild(ta);
-        return ok;
-      }
-
       function showShareToast(msg, duration) {
         const toast = document.createElement('div');
         toast.textContent = msg;
@@ -1602,9 +1404,7 @@
         location.reload();
       });
 
-      if ('serviceWorker' in navigator) {
-        navigator.serviceWorker.register('/sw.js').catch(() => {});
-      }
+      registerServiceWorker();
     </script>
   </body>
 </html>