npm - termbeam - Versions diffs - 1.11.1 → 1.12.0 - Mend

termbeam 1.11.1 → 1.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/package.json +4 -3
package/public-react/assets/index-CTOb8Hzh.js +108 -0
package/public-react/assets/index-DCDkIi8X.css +32 -0
package/public-react/index.html +27 -0
package/public-react/manifest.webmanifest +1 -0
package/public-react/registerSW.js +1 -0
package/public-react/sw.js +2 -0
package/src/routes.js +24 -22
package/src/websocket.js +19 -1
package/public/css/themes.css +0 -217
package/public/index.html +0 -1521
package/public/js/keybar.js +0 -180
package/public/js/search.js +0 -95
package/public/js/shared.js +0 -39
package/public/js/terminal-themes.js +0 -291
package/public/js/themes.js +0 -54
package/public/manifest.json +0 -14
package/public/sw.js +0 -88
package/public/terminal.html +0 -4837
/package/{public → public-react}/icons/icon-192.png +0 -0
/package/{public → public-react}/icons/icon-512.png +0 -0
/package/{public → public-react}/icons/icon.svg +0 -0

package/public/index.html DELETED Viewed

@@ -1,1521 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      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" />
-    <meta name="theme-color" content="#1e1e1e" />
-    <meta
-      name="description"
-      content="TermBeam — beam your terminal to any device. Mobile-optimized web terminal with multi-session support, touch controls, and QR code connection. No SSH needed."
-    />
-    <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 {
-        --info: #b0b0b0;
-        --shadow: rgba(0, 0, 0, 0.15);
-      }
-      [data-theme='light'] {
-        --info: #616161;
-        --shadow: rgba(0, 0, 0, 0.06);
-      }
-      [data-theme='monokai'] {
-        --info: #a59f85;
-        --shadow: rgba(0, 0, 0, 0.3);
-      }
-      [data-theme='solarized-dark'] {
-        --info: #657b83;
-        --shadow: rgba(0, 0, 0, 0.25);
-      }
-      [data-theme='solarized-light'] {
-        --info: #93a1a1;
-        --shadow: rgba(0, 0, 0, 0.08);
-      }
-      [data-theme='nord'] {
-        --info: #b0bac9;
-        --shadow: rgba(0, 0, 0, 0.2);
-      }
-      [data-theme='dracula'] {
-        --info: #c1c4d2;
-        --shadow: rgba(0, 0, 0, 0.25);
-      }
-      [data-theme='github-dark'] {
-        --info: #8b949e;
-        --shadow: rgba(0, 0, 0, 0.3);
-      }
-      [data-theme='one-dark'] {
-        --info: #7f848e;
-        --shadow: rgba(0, 0, 0, 0.25);
-      }
-      [data-theme='catppuccin'] {
-        --info: #a6adc8;
-        --shadow: rgba(0, 0, 0, 0.2);
-      }
-      [data-theme='gruvbox'] {
-        --info: #d5c4a1;
-        --shadow: rgba(0, 0, 0, 0.25);
-      }
-      [data-theme='night-owl'] {
-        --info: #8badc1;
-        --shadow: rgba(0, 0, 0, 0.3);
-      }
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-      html,
-      body {
-        height: 100%;
-        width: 100%;
-        background: var(--bg);
-        color: var(--text);
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-        transition:
-          background 0.3s,
-          color 0.3s;
-      }
-      .header {
-        padding: 20px 16px 12px;
-        text-align: center;
-        border-bottom: 1px solid var(--border);
-        transition: border-color 0.3s;
-        position: relative;
-      }
-      .header h1 {
-        font-size: 22px;
-        font-weight: 700;
-      }
-      .header h1 span {
-        color: var(--accent);
-      }
-      .header p {
-        font-size: 13px;
-        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-wrap {
-        position: absolute;
-        top: 16px;
-        right: 16px;
-      }
-      .theme-toggle {
-        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;
-      }
-      .theme-toggle:hover {
-        color: var(--text);
-        border-color: var(--border-subtle);
-        background: var(--border);
-      }
-      .theme-picker {
-        display: none;
-        position: absolute;
-        top: calc(100% + 4px);
-        right: 0;
-        background: var(--surface);
-        border: 1px solid var(--border);
-        border-radius: 8px;
-        min-width: 160px;
-        padding: 4px 0;
-        z-index: 200;
-        box-shadow: 0 4px 12px var(--shadow);
-      }
-      .theme-picker.open {
-        display: block;
-      }
-      .theme-option {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        padding: 7px 12px;
-        cursor: pointer;
-        font-size: 13px;
-        color: var(--text);
-        transition: background 0.1s;
-        white-space: nowrap;
-      }
-      .theme-option:hover {
-        background: var(--border);
-      }
-      .theme-option.active {
-        color: var(--accent);
-      }
-      .theme-swatch {
-        width: 14px;
-        height: 14px;
-        border-radius: 50%;
-        display: inline-block;
-        flex-shrink: 0;
-        border: 1px solid rgba(128, 128, 128, 0.3);
-      }
-      .update-banner {
-        margin: 12px 16px 0;
-        padding: 10px 14px;
-        background: var(--surface);
-        border: 1px solid var(--accent);
-        border-radius: 10px;
-        display: none;
-        align-items: center;
-        gap: 10px;
-        font-size: 13px;
-        color: var(--text);
-      }
-      .update-banner.visible {
-        display: flex;
-      }
-      .update-banner-text {
-        flex: 1;
-      }
-      .update-banner-text code {
-        font-size: 12px;
-        background: var(--border);
-        padding: 2px 6px;
-        border-radius: 4px;
-        word-break: break-all;
-      }
-      .update-banner-dismiss {
-        background: none;
-        border: none;
-        color: var(--text-dim);
-        cursor: pointer;
-        font-size: 18px;
-        line-height: 1;
-        padding: 0 2px;
-        flex-shrink: 0;
-      }
-      .update-banner-dismiss:hover {
-        color: var(--text);
-      }
-      .sessions-list {
-        padding: 16px;
-        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-      }
-      .session-card {
-        background: var(--surface);
-        border: 1px solid var(--border);
-        border-radius: 12px;
-        padding: 16px;
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-        text-decoration: none;
-        color: inherit;
-        transition:
-          transform 0.2s ease,
-          border-color 0.15s,
-          background 0.3s;
-        cursor: pointer;
-        -webkit-tap-highlight-color: transparent;
-        position: relative;
-        z-index: 1;
-      }
-      .session-card:hover {
-        border-color: var(--accent);
-      }
-      .swipe-wrap {
-        position: relative;
-        overflow: hidden;
-        border-radius: 12px;
-      }
-      .swipe-delete {
-        position: absolute;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        width: 80px;
-        background: var(--danger);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 0 12px 12px 0;
-        z-index: 0;
-      }
-      .swipe-delete button {
-        background: none;
-        border: none;
-        color: white;
-        font-size: 24px;
-        cursor: pointer;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 4px;
-        flex-direction: column;
-      }
-      .swipe-delete button span {
-        font-size: 11px;
-        font-weight: 600;
-      }
-      .session-card .top {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-      }
-      .session-card .name {
-        font-size: 17px;
-        font-weight: 600;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-      }
-      .session-card .name .dot {
-        width: 10px;
-        height: 10px;
-        border-radius: 50%;
-        background: var(--success);
-        flex-shrink: 0;
-      }
-      .session-card .pid {
-        font-size: 12px;
-        color: var(--text-secondary);
-        background: var(--bg);
-        padding: 2px 8px;
-        border-radius: 4px;
-        transition:
-          background 0.3s,
-          color 0.3s;
-      }
-      .session-card .details {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 6px 16px;
-        font-size: 13px;
-        color: var(--info);
-      }
-      .session-card .details span {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-      }
-      .session-card .connect-btn {
-        align-self: flex-end;
-        background: var(--accent);
-        color: #ffffff;
-        border: none;
-        border-radius: 8px;
-        padding: 8px 20px;
-        font-size: 14px;
-        font-weight: 600;
-        cursor: pointer;
-        transition:
-          background 0.15s,
-          transform 0.1s;
-      }
-      .session-card .connect-btn:hover {
-        background: var(--accent-hover);
-      }
-      .session-card .connect-btn:active {
-        background: var(--accent-active);
-        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));
-        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;
-        border: none;
-        border-radius: 12px;
-        font-size: 15px;
-        font-weight: 600;
-        cursor: pointer;
-        text-align: center;
-        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);
-      }
-      .new-session:hover {
-        background: var(--accent-hover);
-        box-shadow: 0 4px 12px rgba(0, 120, 212, 0.4);
-      }
-      .new-session:active {
-        background: var(--accent-active);
-        transform: scale(0.98);
-        box-shadow: 0 1px 4px rgba(0, 120, 212, 0.2);
-      }
-      .empty-state {
-        text-align: center;
-        padding: 60px 20px;
-        color: var(--text-muted);
-        font-size: 15px;
-      }
-      /* New session modal */
-      .modal-overlay {
-        display: none;
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: var(--overlay-bg);
-        z-index: 100;
-        justify-content: center;
-        align-items: center;
-      }
-      .modal-overlay.visible {
-        display: flex;
-      }
-      .modal {
-        background: var(--surface);
-        border-radius: 16px;
-        width: 90%;
-        max-width: 500px;
-        padding: 24px 20px;
-        transition: background 0.3s;
-      }
-      .modal h2 {
-        font-size: 18px;
-        margin-bottom: 16px;
-      }
-      .modal label {
-        display: block;
-        font-size: 13px;
-        color: var(--text-secondary);
-        margin-bottom: 4px;
-        margin-top: 12px;
-      }
-      .modal input,
-      .modal select {
-        width: 100%;
-        padding: 10px 12px;
-        background: var(--bg);
-        border: 1px solid var(--border);
-        border-radius: 8px;
-        color: var(--text);
-        font-size: 15px;
-        outline: none;
-        -webkit-appearance: none;
-        appearance: none;
-        transition:
-          background 0.3s,
-          border-color 0.15s,
-          color 0.3s;
-      }
-      .modal select {
-        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
-        background-repeat: no-repeat;
-        background-position: right 12px center;
-        padding-right: 32px;
-        cursor: pointer;
-      }
-      .modal input:focus,
-      .modal select:focus {
-        border-color: var(--accent);
-      }
-      .modal-actions {
-        display: flex;
-        gap: 12px;
-        margin-top: 20px;
-      }
-      .modal-actions button {
-        flex: 1;
-        padding: 12px;
-        border: none;
-        border-radius: 8px;
-        font-size: 15px;
-        font-weight: 600;
-        cursor: pointer;
-        transition:
-          background 0.15s,
-          transform 0.1s;
-      }
-      .modal-actions button:active {
-        transform: scale(0.95);
-      }
-      .btn-cancel {
-        background: var(--border);
-        color: var(--text);
-      }
-      .btn-cancel:hover {
-        background: var(--border-subtle);
-      }
-      .btn-create {
-        background: var(--accent);
-        color: #ffffff;
-      }
-      .btn-create:hover {
-        background: var(--accent-hover);
-      }
-      /* Folder browser */
-      .cwd-picker {
-        display: flex;
-        gap: 8px;
-      }
-      .cwd-picker input {
-        flex: 1;
-      }
-      .cwd-browse-btn {
-        background: var(--border);
-        color: var(--text);
-        border: 1px solid var(--border);
-        border-radius: 8px;
-        padding: 0 14px;
-        font-size: 18px;
-        cursor: pointer;
-        flex-shrink: 0;
-        display: flex;
-        align-items: center;
-        transition:
-          background 0.15s,
-          border-color 0.15s;
-      }
-      .cwd-browse-btn:hover {
-        border-color: var(--accent);
-      }
-      .cwd-browse-btn:active {
-        background: var(--accent);
-        color: #ffffff;
-      }
-      .browser-overlay {
-        display: none;
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: var(--overlay-bg);
-        z-index: 200;
-        justify-content: center;
-        align-items: flex-end;
-      }
-      .browser-overlay.visible {
-        display: flex;
-      }
-      .browser-sheet {
-        background: var(--surface);
-        border-radius: 16px 16px 0 0;
-        width: 100%;
-        max-width: 500px;
-        height: 80vh;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-        transition: background 0.3s;
-      }
-      .browser-header {
-        padding: 16px 16px 12px;
-        border-bottom: 1px solid var(--border);
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-      }
-      .browser-header h3 {
-        font-size: 17px;
-        font-weight: 600;
-      }
-      .browser-close {
-        background: none;
-        border: none;
-        color: var(--text-dim);
-        font-size: 24px;
-        cursor: pointer;
-        padding: 0 4px;
-        line-height: 1;
-        transition: color 0.15s;
-      }
-      .browser-close:hover {
-        color: var(--text);
-      }
-      .browser-close:active {
-        color: var(--text);
-      }
-      .browser-breadcrumb {
-        padding: 8px 16px;
-        display: flex;
-        align-items: center;
-        gap: 2px;
-        font-size: 13px;
-        overflow-x: auto;
-        white-space: nowrap;
-        border-bottom: 1px solid var(--border);
-        flex-shrink: 0;
-        -webkit-overflow-scrolling: touch;
-      }
-      .crumb {
-        background: none;
-        border: none;
-        color: var(--text-dim);
-        font-size: 13px;
-        cursor: pointer;
-        padding: 4px 6px;
-        border-radius: 4px;
-        flex-shrink: 0;
-        transition:
-          background 0.15s,
-          color 0.15s;
-      }
-      .crumb:active,
-      .crumb:hover {
-        background: var(--border);
-        color: var(--text);
-      }
-      .crumb.current {
-        color: var(--text);
-        font-weight: 600;
-      }
-      .crumb-sep {
-        color: var(--border-subtle);
-        flex-shrink: 0;
-      }
-      .browser-list {
-        flex: 1;
-        overflow-y: auto;
-        padding: 4px 0;
-        -webkit-overflow-scrolling: touch;
-      }
-      .browser-empty {
-        text-align: center;
-        padding: 40px 20px;
-        color: var(--text-muted);
-        font-size: 14px;
-      }
-      .folder-item {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        padding: 12px 16px;
-        cursor: pointer;
-        border-bottom: 1px solid rgba(60, 60, 60, 0.5);
-        transition: background 0.1s;
-        -webkit-tap-highlight-color: transparent;
-      }
-      .folder-item:active {
-        background: rgba(0, 120, 212, 0.2);
-      }
-      .folder-item:hover {
-        background: rgba(0, 120, 212, 0.1);
-      }
-      .folder-icon {
-        font-size: 22px;
-        flex-shrink: 0;
-        width: 28px;
-        text-align: center;
-      }
-      .folder-name {
-        font-size: 15px;
-        color: var(--text);
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      .folder-arrow {
-        color: var(--border-subtle);
-        font-size: 18px;
-        flex-shrink: 0;
-      }
-      .browser-footer {
-        padding: 12px 16px calc(env(safe-area-inset-bottom, 8px) + 8px);
-        border-top: 1px solid var(--border);
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-      }
-      .browser-current-path {
-        font-size: 12px;
-        color: var(--text-dim);
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      .browser-select-btn {
-        width: 100%;
-        padding: 12px;
-        background: var(--accent);
-        color: #ffffff;
-        border: none;
-        border-radius: 10px;
-        font-size: 16px;
-        font-weight: 600;
-        cursor: pointer;
-        transition:
-          background 0.15s,
-          transform 0.1s;
-      }
-      .browser-select-btn:hover {
-        background: var(--accent-hover);
-      }
-      .browser-select-btn:active {
-        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>
-      <div class="theme-wrap" id="theme-wrap">
-        <button class="theme-toggle" id="theme-toggle" title="Switch 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="13.5" cy="6.5" r=".5" fill="currentColor" />
-            <circle cx="17.5" cy="10.5" r=".5" fill="currentColor" />
-            <circle cx="8.5" cy="7.5" r=".5" fill="currentColor" />
-            <circle cx="6.5" cy="12.5" r=".5" fill="currentColor" />
-            <path
-              d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"
-            />
-          </svg>
-        </button>
-        <div class="theme-picker" id="theme-picker">
-          <div class="theme-option" data-theme-option="dark">
-            <span class="theme-swatch" style="background: #1e1e1e"></span>Dark
-          </div>
-          <div class="theme-option" data-theme-option="light">
-            <span class="theme-swatch" style="background: #ffffff"></span>Light
-          </div>
-          <div class="theme-option" data-theme-option="monokai">
-            <span class="theme-swatch" style="background: #272822"></span>Monokai
-          </div>
-          <div class="theme-option" data-theme-option="solarized-dark">
-            <span class="theme-swatch" style="background: #002b36"></span>Solarized Dark
-          </div>
-          <div class="theme-option" data-theme-option="solarized-light">
-            <span class="theme-swatch" style="background: #fdf6e3"></span>Solarized Light
-          </div>
-          <div class="theme-option" data-theme-option="nord">
-            <span class="theme-swatch" style="background: #2e3440"></span>Nord
-          </div>
-          <div class="theme-option" data-theme-option="dracula">
-            <span class="theme-swatch" style="background: #282a36"></span>Dracula
-          </div>
-          <div class="theme-option" data-theme-option="github-dark">
-            <span class="theme-swatch" style="background: #0d1117"></span>GitHub Dark
-          </div>
-          <div class="theme-option" data-theme-option="one-dark">
-            <span class="theme-swatch" style="background: #282c34"></span>One Dark
-          </div>
-          <div class="theme-option" data-theme-option="catppuccin">
-            <span class="theme-swatch" style="background: #1e1e2e"></span>Catppuccin
-          </div>
-          <div class="theme-option" data-theme-option="gruvbox">
-            <span class="theme-swatch" style="background: #282828"></span>Gruvbox
-          </div>
-          <div class="theme-option" data-theme-option="night-owl">
-            <span class="theme-swatch" style="background: #011627"></span>Night Owl
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="update-banner" id="update-banner">
-      <div class="update-banner-text">
-        <strong>Update available:</strong> <span id="update-versions"></span><br />
-        <span id="update-command-text"
-          >Run: <code id="update-command">npm install -g termbeam@latest</code></span
-        >
-      </div>
-      <button
-        class="update-banner-dismiss"
-        id="update-dismiss"
-        title="Dismiss"
-        aria-label="Dismiss update notification"
-      >
-        &times;
-      </button>
-    </div>
-    <div class="sessions-list" id="sessions-list"></div>
-    <button class="new-session" id="new-session-btn">+ New Session</button>
-    <div class="modal-overlay" id="modal">
-      <div class="modal">
-        <h2>New Session</h2>
-        <label for="sess-name">Name</label>
-        <input type="text" id="sess-name" placeholder="My Session" />
-        <label for="sess-shell">Shell</label>
-        <select id="sess-shell">
-          <option value="">Loading shells…</option>
-        </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="Uses server default" />
-          <button type="button" class="cwd-browse-btn" id="browse-btn" title="Browse folders">
-            <svg
-              width="18"
-              height="18"
-              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>
-          </button>
-        </div>
-        <div class="modal-actions">
-          <button class="btn-cancel" id="modal-cancel">Cancel</button>
-          <button class="btn-create" id="modal-create">Create</button>
-        </div>
-      </div>
-    </div>
-    <!-- Folder browser -->
-    <div class="browser-overlay" id="browser-overlay">
-      <div class="browser-sheet">
-        <div class="browser-header">
-          <h3>
-            <svg
-              width="18"
-              height="18"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              style="vertical-align: -3px; margin-right: 6px"
-            >
-              <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
-            >Choose Folder
-          </h3>
-          <button class="browser-close" id="browser-close">×</button>
-        </div>
-        <div class="browser-breadcrumb" id="browser-breadcrumb"></div>
-        <div class="browser-list" id="browser-list"></div>
-        <div class="browser-footer">
-          <div class="browser-current-path" id="browser-path">/</div>
-          <button class="browser-select-btn" id="browser-select">Select This Folder</button>
-        </div>
-      </div>
-    </div>
-    <script src="/js/shared.js"></script>
-    <script src="/js/themes.js"></script>
-    <script>
-      // Close theme picker when option is selected (index-specific behavior)
-      document.querySelectorAll('.theme-option').forEach((el) => {
-        el.addEventListener('click', () => {
-          document.getElementById('theme-picker').classList.remove('open');
-        });
-      });
-      const listEl = document.getElementById('sessions-list');
-      const modal = document.getElementById('modal');
-      // Update notification
-      (async function checkUpdate() {
-        if (sessionStorage.getItem('update-dismissed')) return;
-        try {
-          const res = await fetch('/api/update-check');
-          if (!res.ok) return;
-          const info = await res.json();
-          if (info.updateAvailable && info.latest) {
-            const banner = document.getElementById('update-banner');
-            document.getElementById('update-versions').textContent =
-              'v' + info.current + ' \u2192 v' + info.latest;
-            if (info.command) {
-              const cmdEl = document.getElementById('update-command');
-              cmdEl.textContent = info.command;
-              if (info.method === 'npx') {
-                document.getElementById('update-command-text').textContent = 'Next time, run: ';
-                document.getElementById('update-command-text').appendChild(cmdEl);
-              }
-            }
-            banner.classList.add('visible');
-          }
-        } catch {
-          // Silent — update check is non-critical
-        }
-      })();
-      document.getElementById('update-dismiss').addEventListener('click', () => {
-        document.getElementById('update-banner').classList.remove('visible');
-        sessionStorage.setItem('update-dismissed', '1');
-      });
-      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() {
-        try {
-          const res = await fetch('/api/sessions');
-          if (!res.ok) {
-            console.error(`Failed to load sessions: ${res.status}`);
-            return;
-          }
-          const sessions = await res.json();
-          if (sessions.length === 0) {
-            listEl.innerHTML = '<div class="empty-state">No active sessions</div>';
-            return;
-          }
-          listEl.innerHTML = sessions
-            .map(
-              (s) => `
-        <div class="swipe-wrap" data-session-id="${esc(s.id)}">
-          <div class="swipe-delete">
-            <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" data-nav-id="${esc(s.id)}">
-            <div class="top">
-              <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>
-            ${
-              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>
-      `,
-            )
-            .join('');
-          // 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)';
-          });
-        } catch (err) {
-          console.error('Failed to load sessions:', err);
-        }
-      }
-      document.getElementById('new-session-btn').addEventListener('click', () => {
-        loadShells();
-        modal.classList.add('visible');
-      });
-      document.getElementById('modal-cancel').addEventListener('click', () => {
-        modal.classList.remove('visible');
-      });
-      modal.addEventListener('click', (e) => {
-        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;
-        try {
-          const res = await fetch('/api/sessions', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(body),
-          });
-          if (!res.ok) {
-            console.error(`Failed to create session: ${res.status}`);
-            return;
-          }
-          const data = await res.json();
-          location.href = data.url;
-        } catch (err) {
-          console.error('Failed to create session:', err);
-        }
-      });
-      // --- Shell detection ---
-      let shellsLoaded = false;
-      async function loadShells() {
-        if (shellsLoaded) return;
-        const shellSelect = document.getElementById('sess-shell');
-        try {
-          const res = await fetch('/api/shells');
-          if (!res.ok) throw new Error(`Failed to load shells: ${res.status}`);
-          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');
-            opt.value = s.cmd;
-            opt.textContent = `${s.name} (${s.cmd})`;
-            if (s.cmd === data.default || s.path === data.default) {
-              opt.selected = true;
-            }
-            shellSelect.appendChild(opt);
-          }
-          shellsLoaded = true;
-        } catch {
-          shellSelect.innerHTML = '<option value="">Could not detect shells</option>';
-        }
-      }
-      // --- Swipe to delete ---
-      async function deleteSession(id, e) {
-        e.stopPropagation();
-        const wrap = document.querySelector(`.swipe-wrap[data-session-id="${id}"]`);
-        try {
-          await fetch(`/api/sessions/${id}`, { method: 'DELETE' });
-          if (wrap) {
-            wrap.style.transition = 'opacity 0.25s, max-height 0.3s ease 0.1s';
-            wrap.style.opacity = '0';
-            wrap.style.maxHeight = wrap.offsetHeight + 'px';
-            requestAnimationFrame(() => {
-              wrap.style.maxHeight = '0';
-              wrap.style.overflow = 'hidden';
-            });
-            setTimeout(() => loadSessions(), 350);
-          } else {
-            loadSessions();
-          }
-        } catch {
-          loadSessions();
-        }
-      }
-      function initSwipe(wrap) {
-        const card = wrap.querySelector('.session-card');
-        const THRESHOLD = 70;
-        let startX = 0,
-          currentX = 0,
-          swiping = false,
-          swiped = false;
-        wrap.addEventListener(
-          'touchstart',
-          (e) => {
-            startX = e.touches[0].clientX;
-            currentX = 0;
-            swiping = true;
-            card.style.transition = 'none';
-          },
-          { passive: true },
-        );
-        wrap.addEventListener(
-          'touchmove',
-          (e) => {
-            if (!swiping) return;
-            const dx = e.touches[0].clientX - startX;
-            currentX = Math.min(0, Math.max(-THRESHOLD, dx));
-            card.style.transform = `translateX(${currentX}px)`;
-          },
-          { passive: true },
-        );
-        wrap.addEventListener('touchend', () => {
-          swiping = false;
-          card.style.transition = 'transform 0.2s ease';
-          if (currentX < -THRESHOLD / 2) {
-            card.style.transform = `translateX(-${THRESHOLD}px)`;
-            swiped = true;
-          } else {
-            card.style.transform = 'translateX(0)';
-            swiped = false;
-          }
-        });
-        // Tap elsewhere to close
-        document.addEventListener(
-          'touchstart',
-          (e) => {
-            if (swiped && !wrap.contains(e.target)) {
-              card.style.transition = 'transform 0.2s ease';
-              card.style.transform = 'translateX(0)';
-              swiped = false;
-            }
-          },
-          { passive: true },
-        );
-        // Block card click when swiped open
-        card.addEventListener(
-          'click',
-          (e) => {
-            if (swiped) {
-              e.preventDefault();
-              e.stopPropagation();
-            }
-          },
-          true,
-        );
-      }
-      // --- Folder Browser ---
-      const cwdInput = document.getElementById('sess-cwd');
-      const browserOverlay = document.getElementById('browser-overlay');
-      const browserList = document.getElementById('browser-list');
-      const browserBreadcrumb = document.getElementById('browser-breadcrumb');
-      const browserPath = document.getElementById('browser-path');
-      let currentBrowsePath = '/';
-      let hubServerCwd = '/';
-      document.getElementById('browse-btn').addEventListener('click', async () => {
-        if (hubServerCwd === '/') {
-          try {
-            const data = await fetch('/api/shells').then((r) => {
-              if (!r.ok) throw new Error(`${r.status}`);
-              return r.json();
-            });
-            if (data.cwd) hubServerCwd = data.cwd;
-          } catch {}
-        }
-        const initial = cwdInput.value.trim() || hubServerCwd;
-        navigateTo(initial);
-        browserOverlay.classList.add('visible');
-      });
-      document.getElementById('browser-close').addEventListener('click', () => {
-        browserOverlay.classList.remove('visible');
-      });
-      browserOverlay.addEventListener('click', (e) => {
-        if (e.target === browserOverlay) browserOverlay.classList.remove('visible');
-      });
-      document.getElementById('browser-select').addEventListener('click', () => {
-        cwdInput.value = currentBrowsePath;
-        browserOverlay.classList.remove('visible');
-      });
-      async function navigateTo(dir) {
-        currentBrowsePath = dir;
-        browserPath.textContent = dir;
-        renderBreadcrumb(dir);
-        browserList.innerHTML = '<div class="browser-empty">Loading…</div>';
-        try {
-          const res = await fetch(`/api/dirs?q=${encodeURIComponent(dir + '/')}`);
-          if (!res.ok) throw new Error(`Failed to load directories: ${res.status}`);
-          const data = await res.json();
-          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>`;
-          }
-          items += data.dirs
-            .map((d) => {
-              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>
-            <span class="folder-arrow">›</span>
-          </div>`;
-            })
-            .join('');
-          browserList.innerHTML = items || '<div class="browser-empty">No subfolders</div>';
-          browserList.querySelectorAll('.folder-item').forEach((el) => {
-            el.addEventListener('click', () => navigateTo(el.dataset.path));
-          });
-          browserList.scrollTop = 0;
-        } catch {
-          browserList.innerHTML = '<div class="browser-empty">Error loading folders</div>';
-        }
-      }
-      function renderBreadcrumb(dir) {
-        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 += (i === 0 && isWindows ? '' : sep) + part;
-          const isCurrent = i === parts.length - 1;
-          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;
-        browserBreadcrumb.querySelectorAll('.crumb').forEach((el) => {
-          el.addEventListener('click', () => navigateTo(el.dataset.path));
-        });
-        // Scroll breadcrumb to end
-        browserBreadcrumb.scrollLeft = browserBreadcrumb.scrollWidth;
-      }
-      // Fetch version
-      fetch('/api/version')
-        .then((r) => {
-          if (!r.ok) throw new Error(`${r.status}`);
-          return r.json();
-        })
-        .then((d) => {
-          document.getElementById('version').textContent = 'v' + d.version;
-        })
-        .catch(() => {});
-      loadSessions();
-      loadShells();
-      setInterval(loadSessions, 3000);
-      // Share button
-      function showShareToast(msg, duration) {
-        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(), duration || 1500);
-      }
-      function showShareUrlPrompt(url) {
-        const overlay = document.createElement('div');
-        overlay.style.cssText =
-          'position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:300;display:flex;align-items:center;justify-content:center;';
-        const box = document.createElement('div');
-        box.style.cssText =
-          'background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px;max-width:90vw;width:360px;text-align:center;';
-        box.innerHTML =
-          '<div style="font-size:14px;font-weight:600;color:var(--text);margin-bottom:12px;">Copy this link</div>';
-        const input = document.createElement('input');
-        input.type = 'text';
-        input.readOnly = true;
-        input.value = url;
-        input.style.cssText =
-          'width:100%;box-sizing:border-box;padding:8px;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:13px;margin-bottom:12px;';
-        box.appendChild(input);
-        const btn = document.createElement('button');
-        btn.textContent = 'Close';
-        btn.style.cssText =
-          'padding:6px 20px;border-radius:6px;border:none;background:var(--accent);color:#fff;font-size:13px;font-weight:600;cursor:pointer;';
-        btn.onclick = () => overlay.remove();
-        box.appendChild(btn);
-        overlay.appendChild(box);
-        overlay.addEventListener('click', (e) => {
-          if (e.target === overlay) overlay.remove();
-        });
-        document.body.appendChild(overlay);
-        input.focus();
-        input.select();
-      }
-      document.getElementById('share-btn').addEventListener('click', async () => {
-        const urlPromise = fetch('/api/share-token')
-          .then((r) => (r.ok ? r.json() : null))
-          .then((data) => (data && data.url) || location.href)
-          .catch(() => location.href);
-        // ClipboardItem with a promise preserves user activation across the fetch
-        if (navigator.clipboard && typeof ClipboardItem !== 'undefined') {
-          try {
-            const blobPromise = urlPromise.then((u) => new Blob([u], { type: 'text/plain' }));
-            await navigator.clipboard.write([new ClipboardItem({ 'text/plain': blobPromise })]);
-            showShareToast('Link copied!');
-            return;
-          } catch {}
-        }
-        // Fallback: resolve URL first, then try legacy methods
-        const url = await urlPromise;
-        if (navigator.clipboard && navigator.clipboard.writeText) {
-          try {
-            await navigator.clipboard.writeText(url);
-            showShareToast('Link copied!');
-            return;
-          } catch {}
-        }
-        if (copyToClipboardFallback(url)) {
-          showShareToast('Link copied!');
-        } else {
-          showShareUrlPrompt(url);
-        }
-      });
-      // 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();
-      });
-      registerServiceWorker();
-    </script>
-  </body>
-</html>