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/terminal.html DELETED Viewed

@@ -1,4837 +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 terminal session — access your terminal remotely from any browser with a mobile-optimized touch interface."
-    />
-    <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 — Terminal</title>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.min.css"
-    />
-    <style>
-      :root {
-        --key-bg: #4a4a4c;
-        --key-border: #5a5a5c;
-        --key-shadow: rgba(0, 0, 0, 0.5);
-        --key-special-bg: #333335;
-        --overlay-bg: rgba(0, 0, 0, 0.85);
-      }
-      [data-theme='light'] { --key-bg: #ffffff; --key-border: #b5b5b5; --key-shadow: rgba(0, 0, 0, 0.12); --key-special-bg: #adb5bd; --overlay-bg: rgba(0, 0, 0, 0.5); }
-      [data-theme='monokai'] { --key-bg: #49483e; --key-border: #5c5c4f; --key-shadow: rgba(0, 0, 0, 0.4); --key-special-bg: #3e3d32; }
-      [data-theme='solarized-dark'] { --key-bg: #073642; --key-border: #586e75; --key-shadow: rgba(0, 0, 0, 0.3); --key-special-bg: #002b36; }
-      [data-theme='solarized-light'] { --key-bg: #ffffff; --key-border: #b5b5b5; --key-shadow: rgba(0, 0, 0, 0.12); --key-special-bg: #adb5bd; }
-      [data-theme='nord'] { --key-bg: #434c5e; --key-border: #4c566a; --key-shadow: rgba(0, 0, 0, 0.3); --key-special-bg: #3b4252; }
-      [data-theme='dracula'] { --key-bg: #44475a; --key-border: #525568; --key-shadow: rgba(0, 0, 0, 0.4); --key-special-bg: #343746; }
-      [data-theme='github-dark'] { --key-bg: #161b22; --key-border: #30363d; --key-shadow: rgba(0, 0, 0, 0.4); --key-special-bg: #0d1117; }
-      [data-theme='one-dark'] { --key-bg: #3e4452; --key-border: #4b5263; --key-shadow: rgba(0, 0, 0, 0.3); --key-special-bg: #21252b; }
-      [data-theme='catppuccin'] { --key-bg: #45475a; --key-border: #585b70; --key-shadow: rgba(0, 0, 0, 0.3); --key-special-bg: #313244; }
-      [data-theme='gruvbox'] { --key-bg: #504945; --key-border: #665c54; --key-shadow: rgba(0, 0, 0, 0.4); --key-special-bg: #3c3836; }
-      [data-theme='night-owl'] { --key-bg: #1d3b53; --key-border: #264863; --key-shadow: rgba(0, 0, 0, 0.4); --key-special-bg: #0d2a45; }
-      @font-face {
-        font-family: 'NerdFont';
-        src: url('https://cdn.jsdelivr.net/gh/ryanoasis/nerd-fonts@v3.4.0/patched-fonts/JetBrainsMono/Ligatures/Regular/JetBrainsMonoNerdFont-Regular.ttf')
-          format('truetype');
-        font-weight: normal;
-        font-style: normal;
-        font-display: swap;
-      }
-      @font-face {
-        font-family: 'NerdFont';
-        src: url('https://cdn.jsdelivr.net/gh/ryanoasis/nerd-fonts@v3.4.0/patched-fonts/JetBrainsMono/Ligatures/Bold/JetBrainsMonoNerdFont-Bold.ttf')
-          format('truetype');
-        font-weight: bold;
-        font-style: normal;
-        font-display: swap;
-      }
-      :root {
-        --sab: env(safe-area-inset-bottom, 0px);
-      }
-      * {
-        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;
-        overflow: hidden;
-        touch-action: manipulation;
-        height: 100dvh;
-        overscroll-behavior: none;
-        transition:
-          background 0.3s,
-          color 0.3s;
-      }
-      /* ===== Top Bar (unified) ===== */
-      #top-bar {
-        height: 40px;
-        display: flex;
-        align-items: center;
-        background: var(--surface);
-        border-bottom: 1px solid var(--border);
-        padding: 0 calc(4px + env(safe-area-inset-right, 0px)) 0
-          calc(4px + env(safe-area-inset-left, 0px));
-        padding-top: env(safe-area-inset-top, 0px);
-        gap: 2px;
-        transition:
-          background 0.3s,
-          border-color 0.3s;
-      }
-      #top-bar .left {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        flex: 1;
-        min-width: 0;
-      }
-      #top-bar .right {
-        display: flex;
-        align-items: center;
-        gap: 2px;
-        flex-shrink: 0;
-      }
-      #status-dot {
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        background: var(--danger);
-        display: inline-block;
-        transition: background 0.3s;
-      }
-      #status-dot.connected {
-        background: var(--success);
-      }
-      #session-name {
-        font-weight: 600;
-        font-size: 13px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        max-width: 120px;
-      }
-      #status-text {
-        color: var(--text-secondary);
-        font-size: 11px;
-        white-space: nowrap;
-      }
-      #tab-list {
-        display: flex;
-        align-items: center;
-        flex: 1;
-        overflow-x: auto;
-        -webkit-overflow-scrolling: touch;
-        scrollbar-width: none;
-        gap: 2px;
-        padding: 0 4px;
-        height: 100%;
-        min-width: 0;
-      }
-      #tab-list::-webkit-scrollbar {
-        display: none;
-      }
-      .session-tab {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        padding: 4px 10px;
-        background: transparent;
-        border: none;
-        border-left: 3px solid transparent;
-        border-radius: 6px;
-        color: var(--text-dim);
-        font-size: 12px;
-        font-weight: 500;
-        cursor: pointer;
-        white-space: nowrap;
-        flex-shrink: 0;
-        height: 30px;
-        transition:
-          background 0.15s,
-          color 0.15s;
-        -webkit-tap-highlight-color: transparent;
-        user-select: none;
-      }
-      .session-tab:hover {
-        background: var(--border);
-        color: var(--text);
-      }
-      .session-tab.active {
-        background: var(--bg);
-        color: var(--text);
-        font-weight: 600;
-      }
-      .session-tab.in-split {
-        background: rgba(0, 120, 212, 0.1);
-        color: var(--text);
-      }
-      .session-tab.dragging {
-        opacity: 0.4;
-      }
-      .tab-dot {
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        flex-shrink: 0;
-      }
-      .tab-name {
-        max-width: 100px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      .tab-activity {
-        font-size: 10px;
-        color: var(--text-muted);
-        flex-shrink: 0;
-      }
-      .tab-status {
-        width: 6px;
-        height: 6px;
-        border-radius: 50%;
-        flex-shrink: 0;
-      }
-      .tab-close {
-        display: none;
-        background: none;
-        border: none;
-        color: var(--text-muted);
-        font-size: 14px;
-        cursor: pointer;
-        padding: 0 2px;
-        line-height: 1;
-        transition: color 0.15s;
-      }
-      .session-tab:hover .tab-close,
-      .session-tab.active .tab-close {
-        display: block;
-      }
-      .tab-close:hover {
-        color: var(--danger);
-      }
-      .tab-unread {
-        width: 7px;
-        height: 7px;
-        border-radius: 50%;
-        background: var(--accent);
-        flex-shrink: 0;
-        animation: tab-pulse 1.5s ease-in-out infinite;
-      }
-      @keyframes tab-pulse {
-        0%,
-        100% {
-          opacity: 1;
-        }
-        50% {
-          opacity: 0.4;
-        }
-      }
-      /* ===== Tab Preview ===== */
-      #tab-preview {
-        display: none;
-        position: fixed;
-        z-index: 300;
-        width: min(85vw, 340px);
-        background: var(--bg);
-        border: 1px solid var(--border);
-        border-radius: 10px;
-        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
-        overflow: hidden;
-        pointer-events: none;
-      }
-      #tab-preview.visible {
-        display: block;
-      }
-      .preview-header {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        padding: 6px 10px;
-        border-bottom: 1px solid var(--border);
-        font-size: 12px;
-        font-weight: 600;
-      }
-      .preview-dot {
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        flex-shrink: 0;
-      }
-      .preview-body {
-        padding: 6px 8px;
-        font-family: 'NerdFont', 'JetBrains Mono', monospace;
-        font-size: 10px;
-        line-height: 1.35;
-        color: var(--text);
-        white-space: pre;
-        overflow: hidden;
-        max-height: 140px;
-        -webkit-text-size-adjust: none;
-      }
-      .preview-empty {
-        padding: 12px 10px;
-        font-size: 11px;
-        color: var(--text-muted);
-        text-align: center;
-        font-style: italic;
-      }
-      .tab-bar-btn {
-        background: none;
-        border: none;
-        color: var(--text-dim);
-        width: 30px;
-        height: 30px;
-        border-radius: 8px;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-        font-size: 18px;
-        font-weight: 600;
-        transition:
-          background 0.15s,
-          color 0.15s;
-        -webkit-tap-highlight-color: transparent;
-      }
-      .tab-bar-btn:hover {
-        background: var(--border);
-        color: var(--text);
-      }
-      .tab-bar-btn:active {
-        background: var(--accent);
-        color: #fff;
-      }
-      .tab-bar-btn.active {
-        color: var(--accent);
-      }
-      #tab-new-btn {
-        gap: 3px;
-        width: auto;
-        padding: 0 10px;
-        font-size: 12px;
-      }
-      .new-btn-label {
-        font-size: 11px;
-        font-weight: 600;
-      }
-      .bar-btn {
-        background: none;
-        border: none;
-        color: var(--text-dim);
-        width: 30px;
-        height: 30px;
-        border-radius: 8px;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition:
-          background 0.15s,
-          color 0.15s;
-        -webkit-tap-highlight-color: transparent;
-      }
-      .bar-btn:hover {
-        background: var(--border);
-        color: var(--text);
-      }
-      .bar-btn:active {
-        background: var(--accent);
-        color: #fff;
-      }
-      .bar-btn svg {
-        display: block;
-      }
-      .bar-group {
-        display: flex;
-        align-items: center;
-        background: var(--bg);
-        border-radius: 8px;
-        padding: 2px;
-        gap: 1px;
-        transition: background 0.3s;
-      }
-      .bar-group .bar-btn {
-        width: 26px;
-        height: 26px;
-        border-radius: 6px;
-        font-size: 14px;
-        font-weight: 600;
-      }
-      .theme-wrap {
-        position: relative;
-        display: none;
-        align-items: center;
-      }
-      .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);
-      }
-      #stop-btn {
-        background: none;
-        border: none;
-        color: var(--danger);
-        height: 30px;
-        border-radius: 8px;
-        cursor: pointer;
-        display: none;
-        align-items: center;
-        justify-content: center;
-        gap: 4px;
-        padding: 0 8px;
-        font-size: 11px;
-        font-weight: 600;
-        transition:
-          background 0.15s,
-          color 0.15s,
-          transform 0.1s;
-        -webkit-tap-highlight-color: transparent;
-      }
-      #stop-btn:hover {
-        background: var(--danger);
-        color: #fff;
-      }
-      #stop-btn:active {
-        background: var(--danger-hover);
-        color: #fff;
-        transform: scale(0.9);
-      }
-      /* ===== Notification Toggle ===== */
-      .notify-btn.active {
-        color: var(--accent) !important;
-      }
-      /* ===== Search Bar ===== */
-      .search-bar {
-        display: none;
-        position: absolute;
-        top: 4px;
-        right: 12px;
-        z-index: 100;
-        background: var(--surface);
-        border: 1px solid var(--border);
-        border-radius: 8px;
-        padding: 4px 6px;
-        gap: 4px;
-        align-items: center;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-        font-size: 13px;
-        color: var(--text);
-      }
-      .search-bar.visible {
-        display: flex;
-      }
-      .search-bar input {
-        background: var(--bg);
-        border: 1px solid var(--border);
-        border-radius: 4px;
-        color: var(--text);
-        padding: 3px 6px;
-        font-size: 13px;
-        font-family: inherit;
-        width: 160px;
-        outline: none;
-      }
-      .search-bar input:focus {
-        border-color: var(--accent);
-      }
-      .search-bar .search-count {
-        color: var(--text-secondary);
-        font-size: 11px;
-        min-width: 40px;
-        text-align: center;
-        white-space: nowrap;
-      }
-      .search-bar button {
-        background: none;
-        border: 1px solid transparent;
-        color: var(--text-dim);
-        width: 24px;
-        height: 24px;
-        border-radius: 4px;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 13px;
-        padding: 0;
-      }
-      .search-bar button:hover {
-        background: var(--border);
-        color: var(--text);
-      }
-      .search-bar button.active {
-        color: var(--accent);
-        border-color: var(--accent);
-      }
-      /* ===== Terminals Wrapper ===== */
-      #terminals-wrapper {
-        position: absolute;
-        top: calc(41px + env(safe-area-inset-top, 0px));
-        left: env(safe-area-inset-left, 0px);
-        right: env(safe-area-inset-right, 0px);
-        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
-        display: flex;
-        overflow: hidden;
-      }
-      #terminals-wrapper.split-h {
-        flex-direction: row;
-      }
-      #terminals-wrapper.split-v {
-        flex-direction: column;
-      }
-      .terminal-pane {
-        flex: 1;
-        padding: 2px;
-        overflow: hidden;
-        position: relative;
-        display: none;
-      }
-      .terminal-pane.visible {
-        display: block;
-      }
-      #terminals-wrapper.split-h .terminal-pane.visible + .terminal-pane.visible {
-        border-left: 2px solid var(--accent);
-      }
-      #terminals-wrapper.split-v .terminal-pane.visible + .terminal-pane.visible {
-        border-top: 2px solid var(--accent);
-      }
-      /* ===== Key Bar ===== */
-      #key-bar {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: calc(80px + env(safe-area-inset-bottom, 0px));
-        display: flex;
-        flex-direction: column;
-        background: #1c1c1e;
-        border-top: 1px solid var(--border);
-        padding: 4px calc(3px + env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px)
-          calc(3px + env(safe-area-inset-left, 0px));
-        gap: 6px;
-        z-index: 50;
-        transition:
-          background 0.3s,
-          border-color 0.3s;
-      }
-      [data-theme='light'] #key-bar {
-        background: #d1d3d9;
-      }
-      [data-theme='solarized-light'] #key-bar {
-        background: #d1d3d9;
-      }
-      .key-row {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        flex: 1;
-      }
-      .key-btn {
-        min-width: 0;
-        height: 34px;
-        background: var(--key-bg);
-        color: #fff;
-        border: none;
-        border-radius: 6px;
-        font-size: 13px;
-        font-weight: 500;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        -webkit-tap-highlight-color: transparent;
-        user-select: none;
-        white-space: nowrap;
-        padding: 0 6px;
-        flex: 1 1 0;
-        line-height: 1;
-        transition:
-          background 0.1s,
-          transform 0.08s,
-          box-shadow 0.1s;
-        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
-      }
-      [data-theme='light'] .key-btn {
-        color: #000;
-        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
-      }
-      [data-theme='solarized-light'] .key-btn {
-        color: #000;
-        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
-      }
-      .key-btn:active {
-        background: #6e6e72;
-        transform: scale(0.95);
-        box-shadow: none;
-      }
-      [data-theme='light'] .key-btn:active {
-        background: #c8c8cc;
-      }
-      [data-theme='solarized-light'] .key-btn:active {
-        background: #c8c8cc;
-      }
-      .key-btn.flash {
-        background: #fff !important;
-        color: #000 !important;
-        transition: none;
-      }
-      [data-theme='light'] .key-btn.flash {
-        background: #333 !important;
-        color: #fff !important;
-      }
-      [data-theme='solarized-light'] .key-btn.flash {
-        background: #333 !important;
-        color: #fff !important;
-      }
-      .key-btn.modifier,
-      .key-btn.special {
-        background: var(--key-special-bg);
-        font-size: 12px;
-        font-weight: 600;
-      }
-      [data-theme='light'] .key-btn.modifier,
-      [data-theme='light'] .key-btn.special {
-        background: var(--key-special-bg);
-        color: #000;
-      }
-      [data-theme='solarized-light'] .key-btn.modifier,
-      [data-theme='solarized-light'] .key-btn.special {
-        background: var(--key-special-bg);
-        color: #000;
-      }
-      .key-btn.modifier.active {
-        background: var(--accent);
-        color: #fff;
-        box-shadow:
-          0 1px 0 rgba(0, 0, 0, 0.2),
-          0 0 10px rgba(0, 120, 212, 0.5);
-      }
-      [data-theme='light'] .key-btn.modifier.active {
-        background: var(--accent);
-        color: #fff;
-        box-shadow:
-          0 1px 0 rgba(0, 0, 0, 0.2),
-          0 0 10px rgba(0, 120, 212, 0.3);
-      }
-      .key-btn.icon-btn {
-        font-size: 18px;
-      }
-      .key-btn.key-enter {
-        background: var(--accent);
-        color: #fff;
-        font-size: 20px;
-      }
-      .key-btn.key-enter:active {
-        background: var(--accent-active);
-      }
-      .key-btn.key-danger {
-        background: #5c2222;
-        color: #f87171;
-      }
-      [data-theme='light'] .key-btn.key-danger {
-        background: #fee2e2;
-        color: #dc2626;
-      }
-      [data-theme='solarized-light'] .key-btn.key-danger {
-        background: #fee2e2;
-        color: #dc2626;
-      }
-      .key-btn.key-danger:active {
-        background: var(--danger);
-        color: #fff;
-      }
-      .key-sep {
-        width: 0;
-        flex-shrink: 0;
-      }
-      .xterm {
-        height: 100% !important;
-      }
-      .xterm-viewport {
-        overflow-y: auto !important;
-        scrollbar-width: none;
-        overscroll-behavior: contain;
-      }
-      .xterm-viewport::-webkit-scrollbar {
-        display: none;
-      }
-      .terminal-pane,
-      .terminal-pane .xterm,
-      .terminal-pane .xterm-screen,
-      .terminal-pane .xterm-viewport,
-      .terminal-pane .xterm-helper-textarea {
-        touch-action: none;
-      }
-      /* ===== Scroll-to-bottom indicator ===== */
-      .scroll-bottom-btn {
-        display: none;
-        position: absolute;
-        bottom: 8px;
-        right: 16px;
-        width: 36px;
-        height: 36px;
-        border-radius: 50%;
-        background: var(--accent);
-        color: #fff;
-        border: none;
-        font-size: 18px;
-        line-height: 36px;
-        text-align: center;
-        cursor: pointer;
-        z-index: 50;
-        opacity: 0.85;
-        transition: opacity 0.15s;
-        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-      }
-      .scroll-bottom-btn:hover {
-        opacity: 1;
-      }
-      .scroll-bottom-btn.visible {
-        display: block;
-      }
-      /* ===== Toasts & Overlays ===== */
-      #copy-toast {
-        position: fixed;
-        top: 48px;
-        left: 50%;
-        transform: translateX(-50%) translateY(-8px);
-        background: var(--surface);
-        color: var(--text);
-        border: 1px solid var(--border);
-        padding: 6px 16px;
-        border-radius: 8px;
-        font-size: 13px;
-        font-weight: 600;
-        opacity: 0;
-        pointer-events: none;
-        transition:
-          opacity 0.2s,
-          transform 0.2s;
-        z-index: 200;
-      }
-      #copy-toast.visible {
-        opacity: 1;
-        transform: translateX(-50%) translateY(0);
-      }
-      #paste-overlay {
-        display: none;
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: var(--overlay-bg);
-        z-index: 150;
-        flex-direction: column;
-        align-items: center;
-        justify-content: flex-start;
-        padding-top: calc(80px + env(safe-area-inset-top, 0px));
-        gap: 12px;
-      }
-      #paste-overlay.visible {
-        display: flex;
-      }
-      #paste-overlay label {
-        font-size: 15px;
-        color: #fff;
-        font-weight: 600;
-      }
-      #paste-input {
-        width: 80%;
-        max-width: 400px;
-        min-height: 80px;
-        background: var(--surface);
-        color: var(--text);
-        border: 1px solid var(--border);
-        border-radius: 8px;
-        padding: 10px;
-        font-size: 14px;
-        font-family: 'NerdFont', 'JetBrains Mono', monospace;
-        resize: vertical;
-      }
-      #select-overlay {
-        display: none;
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: var(--bg);
-        z-index: 160;
-        flex-direction: column;
-      }
-      #select-overlay.visible {
-        display: flex;
-      }
-      .select-overlay-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 12px 12px;
-        border-bottom: 1px solid var(--border);
-        font-size: 15px;
-        font-weight: 600;
-        color: var(--text);
-        padding-top: calc(12px + env(safe-area-inset-top, 0px));
-        min-height: 48px;
-        box-sizing: border-box;
-      }
-      .select-overlay-header button {
-        padding: 6px 12px;
-        border: none;
-        border-radius: 8px;
-        font-size: 13px;
-        font-weight: 600;
-        cursor: pointer;
-        white-space: nowrap;
-        flex-shrink: 0;
-        transition:
-          background 0.15s,
-          transform 0.1s;
-      }
-      .select-overlay-header button:active {
-        transform: scale(0.95);
-      }
-      #select-copy {
-        background: var(--accent);
-        color: #fff;
-      }
-      #select-close {
-        background: var(--border);
-        color: var(--text);
-      }
-      #select-content {
-        flex: 1;
-        overflow: auto;
-        padding: 12px 16px;
-        font-family: 'NerdFont', 'JetBrains Mono', monospace;
-        font-size: 13px;
-        line-height: 1.4;
-        color: var(--text);
-        white-space: pre;
-        word-break: normal;
-        -webkit-user-select: text;
-        user-select: text;
-        margin: 0;
-        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
-      }
-      #reconnect-overlay {
-        display: none;
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: var(--overlay-bg);
-        z-index: 100;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: 16px;
-      }
-      #reconnect-overlay.visible {
-        display: flex;
-      }
-      #reconnect-overlay .msg {
-        font-size: 17px;
-        color: #fff;
-      }
-      .overlay-actions {
-        display: flex;
-        gap: 12px;
-      }
-      .overlay-actions button {
-        padding: 10px 24px;
-        border: none;
-        border-radius: 8px;
-        font-size: 15px;
-        font-weight: 600;
-        cursor: pointer;
-        transition:
-          background 0.15s,
-          transform 0.1s;
-      }
-      .overlay-actions button:active {
-        transform: scale(0.95);
-      }
-      #reconnect-btn {
-        background: var(--accent);
-        color: #fff;
-      }
-      #reconnect-btn:hover {
-        background: var(--accent-hover);
-      }
-      #back-to-sessions {
-        background: rgba(255, 255, 255, 0.15);
-        color: #fff;
-      }
-      #back-to-sessions:hover {
-        background: rgba(255, 255, 255, 0.25);
-      }
-      /* ===== 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: 300;
-        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);
-      }
-      /* ===== New Session Modal ===== */
-      .modal-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-start;
-        padding-top: 15vh;
-      }
-      .modal-overlay.visible {
-        display: flex;
-      }
-      .modal {
-        background: var(--surface);
-        border-radius: 16px;
-        width: 90%;
-        max-width: 500px;
-        padding: 24px 20px;
-        transition: background 0.3s;
-        max-height: 90vh;
-        overflow-y: auto;
-      }
-      #upload-modal .modal {
-        overflow: visible;
-      }
-      .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: #fff;
-      }
-      .btn-create:hover {
-        background: var(--accent-hover);
-      }
-      .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;
-        padding: 0;
-        outline: none;
-        transition:
-          border-color 0.15s,
-          transform 0.1s;
-        -webkit-tap-highlight-color: transparent;
-      }
-      .color-swatch:hover {
-        transform: scale(1.1);
-      }
-      .color-swatch.selected {
-        border-color: var(--text);
-        transform: scale(1.15);
-      }
-      /* ===== Sessions Side Panel (mobile) ===== */
-      #panel-toggle {
-        display: none;
-        background: none;
-        border: none;
-        color: var(--text-dim);
-        width: 30px;
-        height: 30px;
-        border-radius: 8px;
-        cursor: pointer;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-        transition:
-          background 0.15s,
-          color 0.15s;
-        -webkit-tap-highlight-color: transparent;
-      }
-      #panel-toggle:hover {
-        background: var(--border);
-        color: var(--text);
-      }
-      #side-panel-backdrop {
-        display: none;
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: rgba(0, 0, 0, 0.5);
-        z-index: 400;
-        opacity: 0;
-        transition: opacity 0.25s;
-      }
-      #side-panel-backdrop.visible {
-        display: block;
-        opacity: 1;
-      }
-      #side-panel {
-        position: fixed;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        width: min(85vw, 380px);
-        background: var(--surface);
-        border-right: 1px solid var(--border);
-        z-index: 410;
-        transform: translateX(-100%);
-        transition:
-          transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
-          background 0.3s;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-        padding-top: env(safe-area-inset-top, 0px);
-        padding-left: env(safe-area-inset-left, 0px);
-        padding-bottom: env(safe-area-inset-bottom, 0px);
-      }
-      #side-panel.open {
-        transform: translateX(0);
-      }
-      .side-panel-header {
-        display: flex;
-        flex-direction: column;
-        padding: 16px 14px 12px;
-        border-bottom: 1px solid var(--border);
-        position: relative;
-      }
-      .side-panel-brand {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        font-size: 18px;
-        font-weight: 700;
-        letter-spacing: -0.02em;
-      }
-      .side-panel-brand svg {
-        flex-shrink: 0;
-      }
-      .side-panel-version {
-        font-size: 11px;
-        color: var(--text-muted);
-        font-weight: 400;
-        margin-top: 2px;
-        padding-left: 28px;
-      }
-      .side-panel-section-title {
-        font-size: 11px;
-        font-weight: 600;
-        text-transform: uppercase;
-        letter-spacing: 0.06em;
-        color: var(--text-dim);
-        padding: 10px 14px 4px;
-      }
-      .side-panel-close {
-        position: absolute;
-        top: 14px;
-        right: 10px;
-        background: none;
-        border: none;
-        color: var(--text-dim);
-        width: 30px;
-        height: 30px;
-        border-radius: 8px;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 20px;
-        transition:
-          background 0.15s,
-          color 0.15s;
-        -webkit-tap-highlight-color: transparent;
-      }
-      .side-panel-close:hover {
-        background: var(--border);
-        color: var(--text);
-      }
-      .side-panel-list {
-        flex: 1 1 0;
-        min-height: 0;
-        overflow-y: auto;
-        padding: 8px;
-        -webkit-overflow-scrolling: touch;
-        display: flex;
-        flex-direction: column;
-        gap: 6px;
-      }
-      .side-panel-card {
-        background: var(--bg);
-        border: 1px solid var(--border);
-        border-radius: 10px;
-        cursor: pointer;
-        overflow: hidden;
-        flex-shrink: 0;
-        transition:
-          background 0.15s,
-          border-color 0.15s;
-        -webkit-tap-highlight-color: transparent;
-      }
-      .side-panel-card:hover {
-        border-color: var(--accent);
-      }
-      .side-panel-card.active {
-        border-color: var(--accent);
-        border-width: 2px;
-      }
-      .side-panel-card-header {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        padding: 10px 12px 6px;
-      }
-      .side-panel-card-dot {
-        width: 10px;
-        height: 10px;
-        border-radius: 50%;
-        flex-shrink: 0;
-      }
-      .side-panel-card-name {
-        font-size: 13px;
-        font-weight: 600;
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      .side-panel-card-status {
-        width: 7px;
-        height: 7px;
-        border-radius: 50%;
-        flex-shrink: 0;
-      }
-      .side-panel-card-close {
-        background: none;
-        border: none;
-        color: var(--text-muted);
-        width: 26px;
-        height: 26px;
-        border-radius: 6px;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 16px;
-        flex-shrink: 0;
-        padding: 0;
-        transition:
-          background 0.15s,
-          color 0.15s;
-        -webkit-tap-highlight-color: transparent;
-      }
-      .side-panel-card-close:hover {
-        background: var(--danger);
-        color: #fff;
-      }
-      .side-panel-card-meta {
-        padding: 0 12px 4px;
-        font-size: 10px;
-        color: var(--text-muted);
-      }
-      .side-panel-card-preview {
-        margin: 0 8px 8px;
-        padding: 6px 8px;
-        background: var(--surface);
-        border-radius: 6px;
-        font-family: 'NerdFont', 'JetBrains Mono', monospace;
-        font-size: 9px;
-        line-height: 1.3;
-        color: var(--text-secondary);
-        white-space: pre;
-        overflow: hidden;
-        max-height: 72px;
-        -webkit-text-size-adjust: none;
-      }
-      .side-panel-card-preview.empty {
-        font-style: italic;
-        color: var(--text-muted);
-        text-align: center;
-        font-family: inherit;
-        font-size: 11px;
-        white-space: normal;
-      }
-      .side-panel-card-git {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 3px 6px;
-        padding: 0 12px 4px;
-        font-size: 10px;
-        color: var(--text-secondary);
-        align-items: center;
-      }
-      .side-panel-card-git .git-badge {
-        display: inline-flex;
-        align-items: center;
-        gap: 3px;
-        background: var(--surface);
-        padding: 1px 6px;
-        border-radius: 3px;
-      }
-      .side-panel-card-git .git-status-clean {
-        color: var(--success);
-      }
-      .side-panel-card-git .git-status-dirty {
-        color: var(--warning, #fbbf24);
-      }
-      @media (max-width: 640px) {
-        #panel-toggle {
-          display: flex;
-        }
-        #tab-list {
-          display: none;
-        }
-        #back-btn {
-          display: none;
-        }
-        #theme-wrap {
-          display: none;
-        }
-        #stop-btn {
-          padding: 0 8px;
-        }
-        #session-name {
-          max-width: 30vw;
-        }
-        #status-text {
-          display: none;
-        }
-        #tab-new-btn {
-          font-size: 13px;
-          padding: 0 8px;
-          width: auto;
-        }
-      }
-      /* ===== Command Palette / Tool Panel ===== */
-      .palette-backdrop {
-        position: fixed;
-        inset: 0;
-        background: rgba(0, 0, 0, 0.4);
-        z-index: 250;
-        opacity: 0;
-        pointer-events: none;
-        transition: opacity 0.3s;
-      }
-      .palette-backdrop.open {
-        opacity: 1;
-        pointer-events: auto;
-      }
-      .palette-panel {
-        position: fixed;
-        top: 0;
-        right: 0;
-        width: 280px;
-        max-width: 85vw;
-        height: 100%;
-        background: var(--surface);
-        border-left: 1px solid var(--border);
-        z-index: 260;
-        transform: translateX(100%);
-        transition: transform 0.3s ease;
-        display: flex;
-        flex-direction: column;
-        overflow-y: auto;
-        -webkit-overflow-scrolling: touch;
-      }
-      .palette-panel.open {
-        transform: translateX(0);
-      }
-      .palette-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 14px 16px;
-        border-bottom: 1px solid var(--border);
-        font-weight: 600;
-        font-size: 15px;
-        color: var(--text);
-      }
-      .palette-close {
-        background: none;
-        border: none;
-        color: var(--text-secondary);
-        font-size: 18px;
-        cursor: pointer;
-        padding: 4px 8px;
-        border-radius: 6px;
-      }
-      .palette-close:hover {
-        background: var(--hover-bg, rgba(255, 255, 255, 0.08));
-        color: var(--text);
-      }
-      .palette-body {
-        padding: 8px 0;
-        flex: 1;
-      }
-      .palette-category {
-        padding: 8px 16px 4px;
-        font-size: 11px;
-        font-weight: 600;
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-        color: var(--text-muted, var(--text-secondary));
-      }
-      .palette-action {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        width: 100%;
-        padding: 10px 16px;
-        background: none;
-        border: none;
-        color: var(--text);
-        font-size: 13px;
-        cursor: pointer;
-        text-align: left;
-        transition: background 0.15s;
-      }
-      .palette-action:hover {
-        background: rgba(255, 255, 255, 0.06);
-      }
-      .palette-action:active {
-        background: rgba(255, 255, 255, 0.1);
-      }
-      [data-theme='light'] .palette-action:hover,
-      [data-theme='solarized-light'] .palette-action:hover {
-        background: rgba(0, 0, 0, 0.06);
-      }
-      [data-theme='light'] .palette-action:active,
-      [data-theme='solarized-light'] .palette-action:active {
-        background: rgba(0, 0, 0, 0.1);
-      }
-      .palette-action-icon {
-        width: 20px;
-        height: 20px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-        color: var(--text-secondary);
-      }
-      .palette-action-icon svg {
-        width: 16px;
-      }
-      /* ===== Theme Sub-Panel ===== */
-      .theme-subpanel {
-        display: none;
-        position: fixed;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 240px;
-        max-height: 70vh;
-        background: var(--surface);
-        border: 1px solid var(--border);
-        border-radius: 12px;
-        z-index: 270;
-        overflow-y: auto;
-        -webkit-overflow-scrolling: touch;
-        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-      }
-      .theme-subpanel.open {
-        display: block;
-      }
-      .theme-subpanel-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 12px 14px;
-        border-bottom: 1px solid var(--border);
-        font-weight: 600;
-        font-size: 13px;
-        color: var(--text);
-      }
-      .theme-subpanel-close {
-        background: none;
-        border: none;
-        color: var(--text-secondary);
-        font-size: 16px;
-        cursor: pointer;
-        padding: 2px 6px;
-        border-radius: 6px;
-      }
-      .theme-subpanel-close:hover {
-        background: var(--hover-bg, rgba(255, 255, 255, 0.08));
-        color: var(--text);
-      }
-      .theme-subpanel-list {
-        padding: 6px 0;
-      }
-      .theme-subpanel-item {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        width: 100%;
-        padding: 9px 14px;
-        background: none;
-        border: none;
-        color: var(--text);
-        font-size: 13px;
-        cursor: pointer;
-        text-align: left;
-        transition: background 0.15s;
-      }
-      .theme-subpanel-item:hover {
-        background: rgba(255, 255, 255, 0.06);
-      }
-      [data-theme='light'] .theme-subpanel-item:hover,
-      [data-theme='solarized-light'] .theme-subpanel-item:hover {
-        background: rgba(0, 0, 0, 0.06);
-      }
-      .theme-subpanel-item.active {
-        color: var(--accent);
-      }
-      .theme-subpanel-swatch {
-        width: 14px;
-        height: 14px;
-        border-radius: 50%;
-        flex-shrink: 0;
-        border: 1px solid rgba(128, 128, 128, 0.3);
-      }
-        height: 16px;
-      }
-    </style>
-  </head>
-  <body>
-    <!-- Sessions Side Panel -->
-    <div id="side-panel-backdrop"></div>
-    <div id="side-panel">
-      <div class="side-panel-header">
-        <div class="side-panel-brand">
-          <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="4 17 10 11 4 5"></polyline>
-            <line x1="12" y1="19" x2="20" y2="19"></line>
-          </svg>
-          TermBeam
-        </div>
-        <div class="side-panel-version" id="side-panel-version"></div>
-        <button class="side-panel-close" id="side-panel-close" title="Close">×</button>
-      </div>
-      <div class="side-panel-section-title">Sessions</div>
-      <div class="side-panel-list" id="side-panel-list"></div>
-      <div style="padding: 8px; border-top: 1px solid var(--border)">
-        <button
-          id="side-panel-new-btn"
-          style="
-            width: 100%;
-            padding: 10px;
-            border: 1px dashed var(--border);
-            border-radius: 8px;
-            background: none;
-            color: var(--accent);
-            font-size: 14px;
-            font-weight: 600;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 6px;
-            transition: background 0.15s;
-          "
-        >
-          + New Session
-        </button>
-      </div>
-    </div>
-    <!-- Top Bar (unified) -->
-    <div id="top-bar">
-      <div class="left">
-        <button id="panel-toggle" title="Sessions">
-          <svg
-            width="18"
-            height="18"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <line x1="3" y1="6" x2="21" y2="6" />
-            <line x1="3" y1="12" x2="21" y2="12" />
-            <line x1="3" y1="18" x2="21" y2="18" />
-          </svg>
-        </button>
-        <button
-          class="bar-btn"
-          id="back-btn"
-          onclick="location.href = '/'"
-          title="Back to sessions"
-        >
-          <svg
-            width="18"
-            height="18"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <polyline points="15 18 9 12 15 6" />
-          </svg>
-        </button>
-        <span id="status-dot"></span>
-        <span id="session-name">…</span>
-        <span id="status-text">Connecting…</span>
-      </div>
-      <div id="tab-list"></div>
-      <div class="right">
-        <button class="tab-bar-btn" id="tab-new-btn" title="New session">
-          <svg
-            width="14"
-            height="14"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2.5"
-            stroke-linecap="round"
-          >
-            <line x1="12" y1="5" x2="12" y2="19" />
-            <line x1="5" y1="12" x2="19" y2="12" /></svg
-          ><span class="new-btn-label">New</span>
-        </button>
-        <div class="theme-wrap" id="theme-wrap">
-          <button class="bar-btn" 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>
-        <button class="bar-btn" id="palette-trigger" title="Tools (Ctrl+K)">
-          <svg
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <rect x="3" y="3" width="7" height="7" rx="1" />
-            <rect x="14" y="3" width="7" height="7" rx="1" />
-            <rect x="3" y="14" width="7" height="7" rx="1" />
-            <rect x="14" y="14" width="7" height="7" rx="1" />
-          </svg>
-        </button>
-        <button id="stop-btn" title="Stop session">
-          <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none">
-            <rect x="6" y="6" width="12" height="12" rx="2" /></svg
-          >Stop
-        </button>
-      </div>
-    </div>
-    <!-- Tab Preview Popover -->
-    <div id="tab-preview">
-      <div class="preview-header">
-        <span class="preview-dot" id="preview-dot"></span>
-        <span id="preview-name"></span>
-      </div>
-      <div class="preview-body" id="preview-body"></div>
-    </div>
-    <!-- Terminals Wrapper (panes created dynamically) -->
-    <div id="terminals-wrapper">
-      <div class="search-bar" id="search-bar">
-        <input type="text" id="search-input" placeholder="Search…" autocomplete="off" />
-        <span class="search-count" id="search-count"></span>
-        <button id="search-regex" title="Regex">.*</button>
-        <button id="search-prev" title="Previous">▲</button>
-        <button id="search-next" title="Next">▼</button>
-        <button id="search-close" title="Close">✕</button>
-      </div>
-    </div>
-    <div id="copy-toast">Copied!</div>
-    <div id="key-bar">
-      <div class="key-row">
-        <button class="key-btn special" data-key="&#x1b;" title="Escape">Esc</button>
-        <button class="key-btn special" id="select-btn" title="Copy text">Copy</button>
-        <button class="key-btn special" id="paste-btn" title="Paste from clipboard">Paste</button>
-        <button class="key-btn special" data-key="&#x1b;OH" title="Home">Home</button>
-        <button class="key-btn special" data-key="&#x1b;OF" title="End">End</button>
-        <button class="key-btn icon-btn" data-key="&#x1b;[A" title="Up">↑</button>
-        <button class="key-btn icon-btn key-enter" data-key="enter" title="Enter / Return">
-          ↵
-        </button>
-      </div>
-      <div class="key-row">
-        <button class="key-btn modifier" id="ctrl-btn" title="Toggle Ctrl modifier">Ctrl</button>
-        <button class="key-btn modifier" id="shift-btn" title="Toggle Shift modifier">Shift</button>
-        <button class="key-btn special" data-key="tab" title="Autocomplete">Tab</button>
-        <button class="key-btn special key-danger" data-key="&#x03;" title="Interrupt process">
-          ^C
-        </button>
-        <button class="key-btn icon-btn" data-key="&#x1b;[D" title="Left">←</button>
-        <button class="key-btn icon-btn" data-key="&#x1b;[B" title="Down">↓</button>
-        <button class="key-btn icon-btn" data-key="&#x1b;[C" title="Right">→</button>
-      </div>
-    </div>
-    <input type="file" id="upload-input" multiple hidden />
-    <!-- Upload Confirm Modal -->
-    <div class="modal-overlay" id="upload-modal">
-      <div class="modal">
-        <h2>Upload Files</h2>
-        <div
-          id="upload-file-list"
-          style="
-            margin-bottom: 12px;
-            font-size: 13px;
-            color: var(--text-secondary);
-            max-height: 120px;
-            overflow-y: auto;
-          "
-        ></div>
-        <label for="upload-dir">Destination directory</label>
-        <div class="cwd-picker">
-          <input type="text" id="upload-dir" placeholder="Session working directory" />
-          <button
-            type="button"
-            class="cwd-browse-btn"
-            id="upload-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="upload-cancel">Cancel</button>
-          <button class="btn-create" id="upload-confirm">Upload</button>
-        </div>
-      </div>
-    </div>
-    <div id="reconnect-overlay">
-      <div class="msg">Session disconnected</div>
-      <div class="overlay-actions">
-        <button id="back-to-sessions" onclick="location.href = '/'">Sessions</button>
-        <button id="reconnect-btn">Reconnect</button>
-      </div>
-    </div>
-    <div id="paste-overlay">
-      <label for="paste-input">Paste your text below</label>
-      <textarea id="paste-input" placeholder="Long-press here and paste…"></textarea>
-      <div class="overlay-actions">
-        <button id="paste-cancel" style="background: rgba(255, 255, 255, 0.15); color: #fff">
-          Cancel
-        </button>
-        <button id="paste-send" style="background: var(--accent); color: #fff">Send</button>
-      </div>
-    </div>
-    <div id="select-overlay">
-      <div class="select-overlay-header">
-        <span id="select-title">Copy Text</span>
-        <div style="display: flex; gap: 8px">
-          <button id="select-copy">Copy</button>
-          <button id="select-close">Done</button>
-        </div>
-      </div>
-      <button
-        id="select-load-more"
-        style="
-          display: none;
-          width: 100%;
-          padding: 8px;
-          background: var(--surface);
-          color: var(--accent);
-          border: 1px solid var(--border);
-          border-radius: 6px;
-          font-size: 13px;
-          cursor: pointer;
-        "
-      >
-        ▲ Load more
-      </button>
-      <pre id="select-content"></pre>
-    </div>
-    <!-- New Session Modal -->
-    <div class="modal-overlay" id="new-session-modal">
-      <div class="modal">
-        <h2>New Session</h2>
-        <label for="ns-name">Name</label>
-        <input type="text" id="ns-name" placeholder="My Session" />
-        <label for="ns-shell">Shell</label>
-        <select id="ns-shell">
-          <option value="">Loading shells…</option>
-        </select>
-        <label for="ns-cmd"
-          >Initial Command
-          <span style="color: var(--text-muted); font-weight: normal">(optional)</span></label
-        >
-        <input type="text" id="ns-cmd" placeholder="e.g. htop, vim" />
-        <label>Color</label>
-        <div class="color-picker" id="ns-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="ns-cwd"
-          >Working Directory
-          <span style="color: var(--text-muted); font-weight: normal">(optional)</span></label
-        >
-        <div class="cwd-picker">
-          <input type="text" id="ns-cwd" placeholder="Uses server default" />
-          <button type="button" class="cwd-browse-btn" id="ns-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="ns-cancel">Cancel</button>
-          <button class="btn-create" id="ns-create">Create</button>
-        </div>
-      </div>
-    </div>
-    <!-- Preview Port Modal -->
-    <div class="modal-overlay" id="preview-modal">
-      <div class="modal">
-        <h2>🌐 Preview Local Port</h2>
-        <p
-          style="
-            color: var(--text-secondary);
-            font-size: 13px;
-            margin: -8px 0 16px;
-            line-height: 1.4;
-          "
-        >
-          Open a local server running on your machine in a new tab — works through the tunnel.
-        </p>
-        <label for="preview-port-input">Port</label>
-        <div style="position: relative">
-          <input
-            type="number"
-            id="preview-port-input"
-            placeholder="e.g. 3000"
-            min="1"
-            max="65535"
-          />
-          <span
-            id="preview-detect-status"
-            style="
-              position: absolute;
-              right: 12px;
-              top: 50%;
-              transform: translateY(-50%);
-              font-size: 12px;
-              color: var(--text-secondary);
-            "
-          ></span>
-        </div>
-        <div
-          id="preview-hint"
-          style="
-            font-size: 12px;
-            color: var(--success);
-            margin-top: 6px;
-            display: none;
-            align-items: center;
-            gap: 4px;
-          "
-        >
-          <span>✓</span> <span id="preview-hint-text"></span>
-        </div>
-        <div class="modal-actions">
-          <button class="btn-cancel" id="preview-cancel">Cancel</button>
-          <button class="btn-create" id="preview-open">Open Preview ↗</button>
-        </div>
-      </div>
-    </div>
-    <!-- Folder Browser -->
-    <div class="browser-overlay" id="ns-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="ns-browser-close">×</button>
-        </div>
-        <div class="browser-breadcrumb" id="ns-browser-breadcrumb"></div>
-        <div class="browser-list" id="ns-browser-list"></div>
-        <div class="browser-footer">
-          <div class="browser-current-path" id="ns-browser-path">/</div>
-          <button class="browser-select-btn" id="ns-browser-select">Select This Folder</button>
-        </div>
-      </div>
-    </div>
-    <!-- Command Palette / Tool Panel -->
-    <div id="palette-backdrop" class="palette-backdrop"></div>
-    <div id="palette-panel" class="palette-panel">
-      <div class="palette-header">
-        <span>Tools</span>
-        <button class="palette-close" id="palette-close">✕</button>
-      </div>
-      <div class="palette-body" id="palette-body"></div>
-    </div>
-    <!-- Theme Sub-Panel -->
-    <div class="theme-subpanel" id="theme-subpanel">
-      <div class="theme-subpanel-header">
-        <span>Theme</span>
-        <button class="theme-subpanel-close" id="theme-subpanel-close">✕</button>
-      </div>
-      <div class="theme-subpanel-list" id="theme-subpanel-list"></div>
-    </div>
-    <script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-web-links@0.11.0/lib/addon-web-links.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-search@0.15.0/lib/addon-search.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-canvas@0.7.0/lib/addon-canvas.min.js"></script>
-    <script src="/js/shared.js"></script>
-    <script src="/js/themes.js"></script>
-    <script src="/js/terminal-themes.js"></script>
-    <script src="/js/keybar.js"></script>
-    <script src="/js/search.js"></script>
-    <script>
-      // ===== Constants =====
-      const SESSION_COLORS = [
-        '#4a9eff',
-        '#4ade80',
-        '#fbbf24',
-        '#c084fc',
-        '#f87171',
-        '#22d3ee',
-        '#fb923c',
-        '#f472b6',
-      ];
-      // ===== State =====
-      const managed = new Map(); // sessionId -> ManagedSession
-      let activeId = null;
-      let splitMode = false;
-      let splitSecondId = null;
-      // ===== Notification State =====
-      let notificationsEnabled = localStorage.getItem('termbeam-notifications') !== 'false';
-      function updateNotifyToggle() {
-        // notify-toggle button removed from top bar; function kept for palette use
-      }
-      function sendCommandNotification(sessionName) {
-        if (Notification.permission !== 'granted') return;
-        try {
-          new Notification('Command finished in ' + sessionName, {
-            icon: '/icons/icon-192.png',
-            tag: 'termbeam-cmd',
-          });
-        } catch {}
-      }
-      function resetSilenceTimer(ms) {
-        if (ms.silenceTimer) clearTimeout(ms.silenceTimer);
-        ms.silenceTimer = setTimeout(() => {
-          ms.silenceTimer = null;
-          if (document.hidden && notificationsEnabled) {
-            sendCommandNotification(ms.name || ms.id);
-          }
-        }, 3000);
-      }
-      // Clipboard copy fallback for non-secure contexts (HTTP over LAN)
-      function copyFallback(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');
-          showToast('Copied!');
-        } catch {}
-        document.body.removeChild(ta);
-      }
-      // Hook into shared theme system to update xterm terminal themes
-      window.onThemeApplied = function (theme) {
-        const termTheme = TERM_THEMES[theme] || darkTermTheme;
-        for (const [, ms] of managed) {
-          ms.term.options.theme = termTheme;
-        }
-      };
-      // ===== DOM Refs =====
-      const statusDot = document.getElementById('status-dot');
-      const statusText = document.getElementById('status-text');
-      const sessionNameEl = document.getElementById('session-name');
-      const reconnectOverlay = document.getElementById('reconnect-overlay');
-      const tabListEl = document.getElementById('tab-list');
-      const terminalsWrapper = document.getElementById('terminals-wrapper');
-      // ===== Font Loading (non-blocking) =====
-      // Hook for font-load refit (set inside init, called by font loader)
-      let onFontReady = null;
-      const nerdFont = new FontFace(
-        'NerdFont',
-        "url('https://cdn.jsdelivr.net/gh/ryanoasis/nerd-fonts@v3.4.0/patched-fonts/JetBrainsMono/Ligatures/Regular/JetBrainsMonoNerdFont-Regular.ttf')",
-      );
-      nerdFont
-        .load()
-        .then((font) => {
-          document.fonts.add(font);
-        })
-        .catch(() => {
-          console.warn('Nerd Font failed to load, using fallback');
-        })
-        .finally(() => {
-          // Refit all terminals once font metrics are stable
-          if (onFontReady) onFontReady();
-        });
-      // Start immediately — don't wait for font
-      init();
-      // ===== Helpers =====
-      function escAttr(str) {
-        return String(str)
-          .replace(/&/g, '&amp;')
-          .replace(/"/g, '&quot;')
-          .replace(/'/g, '&#39;')
-          .replace(/</g, '&lt;')
-          .replace(/>/g, '&gt;');
-      }
-      function safeColor(c) {
-        return /^(#[0-9a-fA-F]{3,8}|var\(--[a-z-]+\)|[a-z]+)$/.test(c) ? c : 'var(--text-muted)';
-      }
-      function showToast(msg) {
-        const toast = document.getElementById('copy-toast');
-        toast.textContent = msg;
-        toast.classList.add('visible');
-        clearTimeout(toast._timer);
-        toast._timer = setTimeout(() => toast.classList.remove('visible'), 1500);
-      }
-      function getActivityLabel(ts) {
-        if (!ts) return '';
-        const diff = (Date.now() - ts) / 1000;
-        if (diff < 5) return '';
-        if (diff < 60) return Math.floor(diff) + 's';
-        if (diff < 3600) return Math.floor(diff / 60) + 'm';
-        return Math.floor(diff / 3600) + 'h';
-      }
-      // ===== Zoom =====
-      const MIN_FONT = 2,
-        MAX_FONT = 32;
-      function defaultFontSize() {
-        const w = window.innerWidth;
-        if (w <= 480) return 12;
-        if (w <= 768) return 13;
-        if (w <= 1280) return 14;
-        return 15;
-      }
-      let fontSize = parseInt(
-        localStorage.getItem('termbeam-fontsize') || String(defaultFontSize()),
-        10,
-      );
-      function applyZoom(size) {
-        fontSize = Math.max(MIN_FONT, Math.min(MAX_FONT, size));
-        localStorage.setItem('termbeam-fontsize', fontSize);
-        for (const [, ms] of managed) {
-          ms.term.options.fontSize = fontSize;
-          if (ms.container.classList.contains('visible')) {
-            ms.fitAddon.fit();
-            sendResize(ms);
-          }
-        }
-      }
-      function sendResize(ms) {
-        if (ms.ws && ms.ws.readyState === 1) {
-          const dims = ms.fitAddon.proposeDimensions();
-          if (dims && (dims.cols !== ms._lastCols || dims.rows !== ms._lastRows)) {
-            ms._lastCols = dims.cols;
-            ms._lastRows = dims.rows;
-            ms.ws.send(JSON.stringify({ type: 'resize', cols: dims.cols, rows: dims.rows }));
-          }
-        }
-      }
-      // ===== Tab Order (persisted in localStorage) =====
-      function getTabOrder() {
-        let order = JSON.parse(localStorage.getItem('termbeam-tab-order') || '[]');
-        const allIds = [...managed.keys()];
-        for (const id of allIds) {
-          if (!order.includes(id)) order.push(id);
-        }
-        order = order.filter((id) => managed.has(id));
-        return order;
-      }
-      function saveTabOrder(order) {
-        localStorage.setItem('termbeam-tab-order', JSON.stringify(order));
-      }
-      // ===== Init =====
-      async function init() {
-        let sessionList = [];
-        try {
-          const res = await fetch('/api/sessions');
-          if (!res.ok) throw new Error(`${res.status}`);
-          sessionList = await res.json();
-        } catch (err) {
-          console.error('Failed to load sessions:', err);
-        }
-        const initialId = new URLSearchParams(location.search).get('id');
-        for (const s of sessionList) addSession(s);
-        const startId =
-          initialId && managed.has(initialId)
-            ? initialId
-            : sessionList.length > 0
-              ? sessionList[0].id
-              : null;
-        if (startId) activateSession(startId);
-        else {
-          window.location.replace('/');
-          return;
-        }
-        renderTabs();
-        setupKeyBar();
-        setupPaste();
-        setupImagePaste();
-        setupUpload();
-        setupSelectMode();
-        setupNewSessionModal();
-        setupPreviewModal();
-        loadShellsForModal();
-        startPolling();
-        setTimeout(requestWakeLock, 0);
-        // Pinch-to-zoom
-        (function setupPinchZoom() {
-          const wrapper = document.getElementById('terminals-wrapper');
-          let pinchStartDist = 0;
-          let pinchStartFont = 0;
-          let pinchActive = false;
-          let pinchZoomTimer = null;
-          function touchDist(t) {
-            const dx = t[0].clientX - t[1].clientX;
-            const dy = t[0].clientY - t[1].clientY;
-            return Math.sqrt(dx * dx + dy * dy);
-          }
-          wrapper.addEventListener(
-            'touchstart',
-            function (e) {
-              if (e.touches.length === 2) {
-                pinchActive = true;
-                pinchStartDist = touchDist(e.touches);
-                pinchStartFont = fontSize;
-                wrapper.style.touchAction = 'none';
-              }
-            },
-            { passive: true },
-          );
-          wrapper.addEventListener(
-            'touchmove',
-            function (e) {
-              if (!pinchActive || e.touches.length !== 2) return;
-              e.preventDefault();
-              const dist = touchDist(e.touches);
-              const scale = dist / pinchStartDist;
-              const newSize = Math.round(pinchStartFont * scale);
-              if (newSize !== fontSize) {
-                if (pinchZoomTimer) clearTimeout(pinchZoomTimer);
-                pinchZoomTimer = setTimeout(function () {
-                  applyZoom(newSize);
-                }, 50);
-              }
-            },
-            { passive: false },
-          );
-          wrapper.addEventListener('touchend', function () {
-            pinchActive = false;
-            wrapper.style.touchAction = '';
-          });
-          wrapper.addEventListener('touchcancel', function () {
-            pinchActive = false;
-            wrapper.style.touchAction = '';
-          });
-        })();
-        // Resize
-        function doResize() {
-          for (const [, ms] of managed) {
-            if (ms.container.classList.contains('visible')) {
-              ms.fitAddon.fit();
-              sendResize(ms);
-            }
-          }
-        }
-        onFontReady = doResize;
-        window.addEventListener('resize', doResize);
-        screen.orientation?.addEventListener('change', () => setTimeout(doResize, 150));
-        // ResizeObserver — catches container size changes that don't trigger window resize
-        if (typeof ResizeObserver !== 'undefined') {
-          let resizeTimer = null;
-          new ResizeObserver(() => {
-            clearTimeout(resizeTimer);
-            resizeTimer = setTimeout(doResize, 100);
-          }).observe(terminalsWrapper);
-        }
-        // Refit after all fonts finish loading (catches bold variant, system fonts)
-        document.fonts.ready.then(() => doResize());
-        // Mobile soft keyboard
-        if (window.visualViewport) {
-          const keyBar = document.getElementById('key-bar');
-          let vpResizeTimer = null;
-          function resetScroll() {
-            window.scrollTo(0, 0);
-            document.documentElement.scrollTop = 0;
-            document.body.scrollTop = 0;
-          }
-          let wasKeyboardOpen = false;
-          function onViewportResize() {
-            const vv = window.visualViewport;
-            const keyboardHeight = window.innerHeight - vv.height;
-            const keyboardOpen = keyboardHeight > 50;
-            if (keyboardOpen) {
-              keyBar.style.bottom = keyboardHeight + 'px';
-              keyBar.style.height = '80px';
-              keyBar.style.paddingBottom = '0px';
-              terminalsWrapper.style.bottom = 80 + keyboardHeight + 'px';
-            } else {
-              keyBar.style.bottom = '0px';
-              keyBar.style.height = '';
-              keyBar.style.paddingBottom = '';
-              terminalsWrapper.style.bottom = '';
-            }
-            const keyboardJustClosed = wasKeyboardOpen && !keyboardOpen;
-            wasKeyboardOpen = keyboardOpen;
-            resetScroll();
-            clearTimeout(vpResizeTimer);
-            vpResizeTimer = setTimeout(() => {
-              resetScroll();
-              doResize();
-              // When keyboard closes, the terminal grows taller — scroll to
-              // bottom so the cursor stays visible instead of appearing offset.
-              if (keyboardJustClosed) {
-                for (const [, ms] of managed) {
-                  if (ms.container.classList.contains('visible')) {
-                    ms.term.scrollToBottom();
-                  }
-                }
-              }
-            }, 150);
-          }
-          function onViewportScroll() {
-            resetScroll();
-          }
-          window.visualViewport.addEventListener('resize', onViewportResize);
-          window.visualViewport.addEventListener('scroll', onViewportScroll);
-          // Page should never scroll — catch any browser-initiated scroll
-          // (e.g. iOS scrolling to show focused xterm textarea behind keyboard)
-          window.addEventListener(
-            'scroll',
-            () => {
-              if (window.scrollY !== 0) resetScroll();
-            },
-            { passive: true },
-          );
-        }
-        // Wake Lock — helps keep mobile browser tab alive
-        let wakeLock = null;
-        async function requestWakeLock() {
-          if (!('wakeLock' in navigator)) return;
-          try {
-            wakeLock = await navigator.wakeLock.request('screen');
-            wakeLock.addEventListener('release', () => {
-              wakeLock = null;
-            });
-          } catch {
-            // Wake Lock request failed (e.g. low battery, not visible)
-          }
-        }
-        function releaseWakeLock() {
-          if (wakeLock) {
-            wakeLock.release().catch(() => {});
-            wakeLock = null;
-          }
-        }
-        // Reconnect & refit when returning from idle / tab switch
-        document.addEventListener('visibilitychange', () => {
-          if (!document.hidden) {
-            if (activeId) {
-              clearUnreadIndicator();
-              const ms = managed.get(activeId);
-              if (ms) {
-                // Reconnect immediately if WebSocket died in background
-                if (!ms.exited && (!ms.ws || ms.ws.readyState !== WebSocket.OPEN)) {
-                  if (ms.reconnectTimer) {
-                    clearTimeout(ms.reconnectTimer);
-                    ms.reconnectTimer = null;
-                  }
-                  ms.reconnectDelay = 3000;
-                  connectSession(ms);
-                } else {
-                  ms.term.scrollToBottom();
-                  ms.fitAddon.fit();
-                  sendResize(ms);
-                }
-              }
-              if (splitMode && splitSecondId) {
-                const ms2 = managed.get(splitSecondId);
-                if (ms2) {
-                  if (!ms2.exited && (!ms2.ws || ms2.ws.readyState !== WebSocket.OPEN)) {
-                    if (ms2.reconnectTimer) {
-                      clearTimeout(ms2.reconnectTimer);
-                      ms2.reconnectTimer = null;
-                    }
-                    ms2.reconnectDelay = 3000;
-                    connectSession(ms2);
-                  } else {
-                    ms2.term.scrollToBottom();
-                    ms2.fitAddon.fit();
-                    sendResize(ms2);
-                  }
-                }
-              }
-            }
-            requestWakeLock();
-          } else {
-            releaseWakeLock();
-          }
-        });
-        // Reconnect button
-        document.getElementById('reconnect-btn').addEventListener('click', () => {
-          const ms = managed.get(activeId);
-          if (ms) {
-            if (ms.reconnectTimer) {
-              clearTimeout(ms.reconnectTimer);
-              ms.reconnectTimer = null;
-            }
-            ms.exited = false;
-            ms.reconnectDelay = 3000;
-            ms.term.clear();
-            connectSession(ms);
-          }
-        });
-        // Stop button
-        document.getElementById('stop-btn').addEventListener('click', async () => {
-          if (!activeId) return;
-          if (!confirm('Stop this session? The process will be killed.')) return;
-          await removeSession(activeId);
-        });
-        // Version
-        fetch('/api/version')
-          .then((r) => {
-            if (!r.ok) throw new Error(`${r.status}`);
-            return r.json();
-          })
-          .then((d) => {
-            window._termbeamVersion = 'v' + d.version;
-            document.getElementById('side-panel-version').textContent = 'v' + d.version;
-          })
-          .catch(() => {});
-      }
-      // ===== Session Management =====
-      function addSession(data) {
-        if (managed.has(data.id)) return;
-        managed.set(data.id, null); // reserve slot to prevent race condition
-        const term = new window.Terminal({
-          cursorBlink: true,
-          fontSize: fontSize,
-          fontFamily:
-            "'NerdFont', 'JetBrains Mono', 'MesloLGS NF', 'Hack Nerd Font', 'Fira Code', Menlo, monospace",
-          fontWeight: 'normal',
-          fontWeightBold: 'bold',
-          letterSpacing: 0,
-          lineHeight: 1.0,
-          theme: TERM_THEMES[getTheme()] || darkTermTheme,
-          allowProposedApi: true,
-          scrollback: 10000,
-          scrollOnOutput: false,
-        });
-        const fitAddon = new window.FitAddon.FitAddon();
-        const webLinksAddon = new window.WebLinksAddon.WebLinksAddon();
-        const searchAddon = new window.SearchAddon.SearchAddon();
-        term.loadAddon(fitAddon);
-        term.loadAddon(webLinksAddon);
-        term.loadAddon(searchAddon);
-        const container = document.createElement('div');
-        container.className = 'terminal-pane';
-        container.style.position = 'relative';
-        terminalsWrapper.appendChild(container);
-        term.open(container);
-        // Canvas renderer — sharper text and more accurate selection.
-        // Skip in automated browsers (navigator.webdriver) where canvas
-        // rendering makes .xterm-rows inaccessible to DOM text queries.
-        if (window.CanvasAddon && !navigator.webdriver) {
-          try {
-            term.loadAddon(new window.CanvasAddon.CanvasAddon());
-          } catch {
-            // Fall back to DOM renderer
-          }
-        }
-        // Scroll-to-bottom button
-        const scrollBtn = document.createElement('button');
-        scrollBtn.className = 'scroll-bottom-btn';
-        scrollBtn.textContent = '↓';
-        scrollBtn.title = 'Scroll to bottom';
-        scrollBtn.addEventListener('click', (e) => {
-          e.stopPropagation();
-          term.scrollToBottom();
-        });
-        container.appendChild(scrollBtn);
-        // Write coalescer — batch rapid term.write() calls to reduce flicker.
-        // Single RAF for interactive typing (low latency). During bursts
-        // (>512 bytes buffered, e.g. Ctrl+O expand), waits one extra frame
-        // so cursor-movement sequences arrive as one atomic write.
-        let writeBuf = '';
-        let writeRaf = null;
-        function flushWrite() {
-          writeRaf = null;
-          if (writeBuf) {
-            term.write(writeBuf);
-            writeBuf = '';
-          }
-        }
-        function coalescedWrite(data) {
-          writeBuf += data;
-          if (!writeRaf) {
-            writeRaf = requestAnimationFrame(() => {
-              if (writeBuf.length > 512) {
-                writeRaf = requestAnimationFrame(flushWrite);
-              } else {
-                flushWrite();
-              }
-            });
-          }
-        }
-        // Track whether user has scrolled away from bottom
-        let userScrolledUp = false;
-        term.onScroll(() => {
-          const buf = term.buffer.active;
-          userScrolledUp = buf.viewportY < buf.baseY;
-          scrollBtn.classList.toggle('visible', userScrolledUp);
-        });
-        // Pointer-event scroll handler — uses setPointerCapture so scrolling
-        // survives xterm DOM re-renders under the finger (touch on a letter).
-        (function () {
-          let startY = null,
-            scrolling = false,
-            accum = 0,
-            ptrId = null;
-          container.addEventListener(
-            'pointerdown',
-            (e) => {
-              if (e.pointerType !== 'touch' || ptrId !== null) return;
-              startY = e.clientY;
-              scrolling = false;
-              accum = 0;
-              ptrId = e.pointerId;
-            },
-            { capture: true },
-          );
-          container.addEventListener(
-            'pointermove',
-            (e) => {
-              if (e.pointerId !== ptrId) return;
-              const y = e.clientY;
-              const delta = startY - y;
-              if (!scrolling) {
-                if (Math.abs(delta) > 10) {
-                  scrolling = true;
-                  term.clearSelection();
-                  // Lock all future pointer events to this element —
-                  // immune to DOM mutations, xterm re-renders, etc.
-                  try {
-                    container.setPointerCapture(ptrId);
-                  } catch (_) {}
-                } else {
-                  return;
-                }
-              }
-              e.preventDefault();
-              e.stopPropagation();
-              startY = y;
-              const lineH = term.options.fontSize * (term.options.lineHeight || 1);
-              accum += delta;
-              const lines = Math.trunc(accum / lineH);
-              if (lines !== 0) {
-                term.scrollLines(lines);
-                accum -= lines * lineH;
-              }
-            },
-            { capture: true, passive: false },
-          );
-          function endScroll(e) {
-            if (e.pointerId !== ptrId) return;
-            if (scrolling) {
-              e.stopPropagation();
-              try {
-                container.releasePointerCapture(ptrId);
-              } catch (_) {}
-            }
-            startY = null;
-            scrolling = false;
-            ptrId = null;
-          }
-          container.addEventListener('pointerup', endScroll, { capture: true });
-          container.addEventListener('pointercancel', endScroll, { capture: true });
-        })();
-        // Copy on selection
-        term.onSelectionChange(() => {
-          const sel = term.getSelection();
-          if (!sel) return;
-          if (navigator.clipboard && navigator.clipboard.writeText) {
-            navigator.clipboard
-              .writeText(sel)
-              .then(() => showToast('Copied!'))
-              .catch(() => {
-                // Fallback for non-secure contexts (HTTP over LAN)
-                copyFallback(sel);
-              });
-          } else {
-            copyFallback(sel);
-          }
-        });
-        // Click to focus
-        container.addEventListener('click', () => {
-          term.focus();
-          // In split mode, clicking a pane makes it active
-          if (splitMode && ms.id !== activeId) {
-            const oldSecond = splitSecondId;
-            splitSecondId = activeId;
-            activeId = ms.id;
-            updateStatusBar();
-            renderTabs();
-          }
-        });
-        const ms = {
-          id: data.id,
-          name: data.name,
-          color: data.color || SESSION_COLORS[managed.size % SESSION_COLORS.length],
-          shell: data.shell,
-          cwd: data.cwd,
-          pid: data.pid,
-          git: data.git || null,
-          term,
-          fitAddon,
-          searchAddon,
-          container,
-          coalescedWrite,
-          scrollBtn,
-          ws: null,
-          exited: false,
-          reconnectTimer: null,
-          reconnectDelay: 3000,
-          lastActivity: data.lastActivity || Date.now(),
-          silenceTimer: null,
-        };
-        managed.set(data.id, ms);
-        // Terminal input → WebSocket
-        term.onData((input) => {
-          if (ms.ws && ms.ws.readyState === 1) {
-            // Auto-scroll to bottom on user input
-            if (userScrolledUp) {
-              ms.term.scrollToBottom();
-            }
-            let data = input;
-            if (ctrlActive && input.length === 1) {
-              const code = input.toLowerCase().charCodeAt(0);
-              // a-z → Ctrl+letter (0x01-0x1a)
-              if (code >= 97 && code <= 122) {
-                data = String.fromCharCode(code - 96);
-              }
-              clearModifiers();
-            } else if (shiftActive && !ctrlActive) {
-              clearModifiers();
-            }
-            ms.ws.send(JSON.stringify({ type: 'input', data }));
-          }
-        });
-        connectSession(ms);
-        return ms;
-      }
-      // Tab title activity indicator for unread output
-      const originalTitle = document.title;
-      let hasUnread = false;
-      // Shared AudioContext — must be created/resumed on user gesture for mobile
-      let notifAudioCtx = null;
-      function ensureAudioContext() {
-        if (!notifAudioCtx) {
-          notifAudioCtx = new (window.AudioContext || window.webkitAudioContext)();
-        }
-        if (notifAudioCtx.state === 'suspended') notifAudioCtx.resume();
-        return notifAudioCtx;
-      }
-      document.addEventListener('click', ensureAudioContext, { once: true });
-      document.addEventListener('touchstart', ensureAudioContext, { once: true });
-      function playNotificationSound() {
-        try {
-          const ctx = ensureAudioContext();
-          const osc = ctx.createOscillator();
-          const gain = ctx.createGain();
-          osc.connect(gain);
-          gain.connect(ctx.destination);
-          osc.frequency.value = 440;
-          osc.type = 'sine';
-          gain.gain.setValueAtTime(0.15, ctx.currentTime);
-          gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.15);
-          osc.start(ctx.currentTime);
-          osc.stop(ctx.currentTime + 0.15);
-        } catch {
-          // Audio not available
-        }
-      }
-      function markUnreadOutput() {
-        if (!document.hidden || hasUnread) return;
-        hasUnread = true;
-        playNotificationSound();
-        document.title = '(\u25CF) ' + originalTitle;
-      }
-      function clearUnreadIndicator() {
-        if (!hasUnread) return;
-        hasUnread = false;
-        document.title = originalTitle;
-      }
-      function connectSession(ms) {
-        if (ms.reconnectTimer) {
-          clearTimeout(ms.reconnectTimer);
-          ms.reconnectTimer = null;
-        }
-        if (ms.ws) {
-          try {
-            ms.ws.close();
-          } catch {}
-        }
-        const proto = location.protocol === 'https:' ? 'wss' : 'ws';
-        const ws = new WebSocket(`${proto}://${location.host}/ws`);
-        ms.ws = ws;
-        ws.onopen = () => {
-          if (ms.ws !== ws) return;
-          ws.send(JSON.stringify({ type: 'attach', sessionId: ms.id }));
-          ms.reconnectDelay = 3000;
-          if (ms.id === activeId) {
-            statusDot.className = 'connected';
-            statusText.textContent = '';
-            reconnectOverlay.classList.remove('visible');
-          }
-          renderTabs();
-        };
-        ws.onmessage = (event) => {
-          if (ms.ws !== ws) return;
-          try {
-            const msg = JSON.parse(event.data);
-            if (msg.type === 'output') {
-              ms.coalescedWrite(msg.data);
-              ms.lastActivity = Date.now();
-              resetSilenceTimer(ms);
-              markUnreadOutput();
-              if (ms.id !== activeId && !ms.hasUnread) {
-                ms.hasUnread = true;
-                playNotificationSound();
-                renderTabs();
-              }
-            } else if (msg.type === 'attached') {
-              if (ms.container.classList.contains('visible')) {
-                sendResize(ms);
-              }
-              if (ms.id === activeId) {
-                statusDot.className = 'connected';
-                statusText.textContent = '';
-              }
-            } else if (msg.type === 'exit') {
-              ms.exited = true;
-              renderTabs();
-              if (ms.id === activeId) {
-                statusText.textContent = 'Exited (code ' + msg.code + ')';
-                statusDot.className = '';
-                reconnectOverlay.querySelector('.msg').textContent =
-                  'Session exited (code ' + msg.code + ')';
-                reconnectOverlay.classList.add('visible');
-              }
-            } else if (msg.type === 'error') {
-              if (msg.message === 'Session not found') {
-                ms.exited = true;
-                if (ms.reconnectTimer) {
-                  clearTimeout(ms.reconnectTimer);
-                  ms.reconnectTimer = null;
-                }
-                renderTabs();
-              }
-              if (ms.id === activeId) {
-                statusText.textContent = msg.message;
-                reconnectOverlay.querySelector('.msg').textContent = msg.message;
-                reconnectOverlay.classList.add('visible');
-              }
-            }
-          } catch {
-            ms.coalescedWrite(event.data);
-          }
-        };
-        ws.onclose = () => {
-          if (ms.ws !== ws) return;
-          if (ms.id === activeId) {
-            statusDot.className = '';
-            statusText.textContent = 'Disconnected';
-            reconnectOverlay.querySelector('.msg').textContent =
-              'Disconnected. Attempting to reconnect\u2026';
-            reconnectOverlay.classList.add('visible');
-          }
-          if (!ms.exited) {
-            ms.reconnectTimer = setTimeout(() => {
-              ms.reconnectDelay = Math.min(ms.reconnectDelay * 1.5, 30000);
-              connectSession(ms);
-            }, ms.reconnectDelay);
-          }
-        };
-        ws.onerror = () => {
-          if (ms.ws !== ws) return;
-          if (ms.id === activeId) statusText.textContent = 'Connection error';
-        };
-      }
-      function activateSession(id) {
-        if (!managed.has(id)) return;
-        activeId = id;
-        const ms = managed.get(id);
-        if (ms) ms.hasUnread = false;
-        reconnectOverlay.classList.remove('visible');
-        // Show/hide panes
-        for (const [sid, ms] of managed) {
-          const show = sid === id || (splitMode && sid === splitSecondId);
-          ms.container.classList.toggle('visible', show);
-        }
-        updateStatusBar();
-        // Fit visible terminals and scroll to bottom
-        requestAnimationFrame(() => {
-          for (const [, ms] of managed) {
-            if (ms.container.classList.contains('visible')) {
-              ms.fitAddon.fit();
-              sendResize(ms);
-              ms.term.scrollToBottom();
-            }
-          }
-        });
-        // Update URL
-        const url = new URL(location);
-        url.searchParams.set('id', id);
-        history.replaceState(null, '', url);
-        renderTabs();
-      }
-      function updateStatusBar() {
-        const ms = managed.get(activeId);
-        const stopBtn = document.getElementById('stop-btn');
-        if (!ms) {
-          stopBtn.style.display = 'none';
-          return;
-        }
-        stopBtn.style.display = '';
-        sessionNameEl.textContent = ms.name;
-        statusDot.className = ms.ws && ms.ws.readyState === 1 ? 'connected' : '';
-        statusText.textContent =
-          ms.ws && ms.ws.readyState === 1 ? '' : ms.exited ? 'Exited' : 'Disconnected';
-      }
-      async function removeSession(id) {
-        const ms = managed.get(id);
-        if (ms) {
-          ms.exited = true;
-          if (ms.reconnectTimer) {
-            clearTimeout(ms.reconnectTimer);
-            ms.reconnectTimer = null;
-          }
-          if (ms.silenceTimer) {
-            clearTimeout(ms.silenceTimer);
-            ms.silenceTimer = null;
-          }
-          if (ms.ws)
-            try {
-              ms.ws.close();
-            } catch {}
-        }
-        try {
-          await fetch('/api/sessions/' + encodeURIComponent(id), { method: 'DELETE' });
-        } catch {}
-        if (ms) {
-          ms.term.dispose();
-          ms.container.remove();
-          managed.delete(id);
-        }
-        if (id === splitSecondId) splitSecondId = null;
-        if (id === activeId) {
-          const remaining = [...managed.keys()];
-          if (remaining.length > 0) activateSession(remaining[0]);
-          else {
-            window.location.replace('/');
-            return;
-          }
-        }
-        renderTabs();
-      }
-      // ===== Tab Rendering =====
-      function renderTabs() {
-        const order = getTabOrder();
-        tabListEl.innerHTML = order
-          .map((id) => {
-            const ms = managed.get(id);
-            if (!ms) return '';
-            const isActive = id === activeId;
-            const isSplit = splitMode && id === splitSecondId;
-            const statusColor = ms.exited
-              ? 'var(--danger)'
-              : ms.ws && ms.ws.readyState === 1
-                ? 'var(--success)'
-                : 'var(--text-muted)';
-            const activity = getActivityLabel(ms.lastActivity);
-            let cls = 'session-tab';
-            if (isActive) cls += ' active';
-            if (isSplit) cls += ' in-split';
-            return (
-              '<button class="' +
-              cls +
-              '" data-id="' +
-              escAttr(id) +
-              '" draggable="true">' +
-              '<span class="tab-dot" style="background:' +
-              safeColor(ms.color) +
-              '"></span>' +
-              '<span class="tab-name">' +
-              esc(ms.name) +
-              '</span>' +
-              (activity ? '<span class="tab-activity">' + activity + '</span>' : '') +
-              (ms.hasUnread && !isActive ? '<span class="tab-unread"></span>' : '') +
-              '<span class="tab-status" style="background:' +
-              safeColor(statusColor) +
-              '"></span>' +
-              '<span class="tab-close" data-close="' +
-              escAttr(id) +
-              '">×</span>' +
-              '</button>'
-            );
-          })
-          .join('');
-        attachTabHandlers();
-        initTabDrag();
-      }
-      // ===== Tab Preview =====
-      const previewEl = document.getElementById('tab-preview');
-      const previewDot = document.getElementById('preview-dot');
-      const previewName = document.getElementById('preview-name');
-      const previewBody = document.getElementById('preview-body');
-      let previewTimer = null;
-      let previewVisible = false;
-      function getTerminalLines(ms, count) {
-        const buf = ms.term.buffer.active;
-        const totalRows = buf.length;
-        // Find the last non-empty line (buffer has empty padding rows)
-        let lastNonEmpty = -1;
-        for (let i = totalRows - 1; i >= 0; i--) {
-          const line = buf.getLine(i);
-          if (line && line.translateToString(true).trim() !== '') {
-            lastNonEmpty = i;
-            break;
-          }
-        }
-        if (lastNonEmpty < 0) return [];
-        const start = Math.max(0, lastNonEmpty - count + 1);
-        const lines = [];
-        for (let i = start; i <= lastNonEmpty; i++) {
-          const line = buf.getLine(i);
-          if (line) lines.push(line.translateToString(true));
-        }
-        return lines;
-      }
-      function showPreview(tabEl, sessionId) {
-        const ms = managed.get(sessionId);
-        if (!ms) return;
-        const lines = getTerminalLines(ms, 12);
-        previewDot.style.background = ms.color;
-        previewName.textContent = ms.name;
-        if (lines.length === 0) {
-          previewBody.innerHTML = '<div class="preview-empty">No output yet</div>';
-        } else {
-          previewBody.textContent = lines.join('\n');
-        }
-        previewEl.classList.add('visible');
-        previewVisible = true;
-        // Position: above the tab, centered
-        const tabRect = tabEl.getBoundingClientRect();
-        const pw = previewEl.offsetWidth;
-        const ph = previewEl.offsetHeight;
-        let left = tabRect.left + tabRect.width / 2 - pw / 2;
-        left = Math.max(6, Math.min(left, window.innerWidth - pw - 6));
-        let top = tabRect.top - ph - 6;
-        if (top < 6) top = tabRect.bottom + 6; // Below if not enough room
-        previewEl.style.left = left + 'px';
-        previewEl.style.top = top + 'px';
-      }
-      function hidePreview() {
-        previewEl.classList.remove('visible');
-        previewVisible = false;
-        if (previewTimer) {
-          clearTimeout(previewTimer);
-          previewTimer = null;
-        }
-      }
-      function attachTabHandlers() {
-        tabListEl.querySelectorAll('.session-tab').forEach((tab) => {
-          tab.addEventListener('click', (e) => {
-            if (e.target.dataset.close) return;
-            hidePreview();
-            activateSession(tab.dataset.id);
-          });
-          // Middle-click to close tab
-          tab.addEventListener('auxclick', (e) => {
-            if (e.button === 1) {
-              e.preventDefault();
-              if (confirm('Close this session?')) removeSession(tab.dataset.id);
-            }
-          });
-          // Desktop: hover preview (non-active tabs only)
-          tab.addEventListener('mouseenter', () => {
-            if (tab.dataset.id === activeId) return;
-            previewTimer = setTimeout(() => showPreview(tab, tab.dataset.id), 400);
-          });
-          tab.addEventListener('mouseleave', () => hidePreview());
-        });
-        tabListEl.querySelectorAll('.tab-close').forEach((btn) => {
-          btn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            if (confirm('Close this session?')) removeSession(btn.dataset.close);
-          });
-        });
-      }
-      // ===== Sessions Side Panel =====
-      const sidePanel = document.getElementById('side-panel');
-      const sidePanelBackdrop = document.getElementById('side-panel-backdrop');
-      const sidePanelList = document.getElementById('side-panel-list');
-      function openSidePanel() {
-        renderSidePanel();
-        sidePanel.classList.add('open');
-        sidePanelBackdrop.classList.add('visible');
-      }
-      function closeSidePanel() {
-        sidePanel.classList.remove('open');
-        sidePanelBackdrop.classList.remove('visible');
-      }
-      function renderSidePanel() {
-        const order = getTabOrder();
-        sidePanelList.innerHTML = order
-          .map((id) => {
-            const ms = managed.get(id);
-            if (!ms) return '';
-            const isActive = id === activeId;
-            const statusColor = ms.exited
-              ? 'var(--danger)'
-              : ms.ws && ms.ws.readyState === 1
-                ? 'var(--success)'
-                : 'var(--text-muted)';
-            const activity = getActivityLabel(ms.lastActivity);
-            const lines = getTerminalLines(ms, 6);
-            const previewContent =
-              lines.length > 0
-                ? '<div class="side-panel-card-preview">' + esc(lines.join('\n')) + '</div>'
-                : '<div class="side-panel-card-preview empty">No output yet</div>';
-            return (
-              '<div class="side-panel-card' +
-              (isActive ? ' active' : '') +
-              '" data-id="' +
-              escAttr(id) +
-              '">' +
-              '<div class="side-panel-card-header">' +
-              '<span class="side-panel-card-dot" style="background:' +
-              safeColor(ms.color) +
-              '"></span>' +
-              '<span class="side-panel-card-name">' +
-              esc(ms.name) +
-              '</span>' +
-              (ms.hasUnread && !isActive ? '<span class="tab-unread"></span>' : '') +
-              '<span class="side-panel-card-status" style="background:' +
-              safeColor(statusColor) +
-              '"></span>' +
-              '<button class="side-panel-card-close" data-close-id="' +
-              escAttr(id) +
-              '" title="Close session">×</button>' +
-              '</div>' +
-              (activity ? '<div class="side-panel-card-meta">' + activity + ' ago</div>' : '') +
-              (ms.git
-                ? '<div class="side-panel-card-git">' +
-                  '<span class="git-badge"><svg width="10" height="10" 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(ms.git.branch || 'detached') +
-                  '</span>' +
-                  (ms.git.provider
-                    ? '<span class="git-badge">' + esc(ms.git.provider) + '</span>'
-                    : '') +
-                  (ms.git.repoName
-                    ? '<span class="git-badge">' + esc(ms.git.repoName) + '</span>'
-                    : '') +
-                  (ms.git.status
-                    ? '<span class="git-badge ' +
-                      (ms.git.status.clean ? 'git-status-clean' : 'git-status-dirty') +
-                      '">' +
-                      (ms.git.status.clean ? '✓ clean' : esc(ms.git.status.summary)) +
-                      '</span>'
-                    : '') +
-                  '</div>'
-                : '') +
-              previewContent +
-              '</div>'
-            );
-          })
-          .join('');
-        sidePanelList.querySelectorAll('.side-panel-card-close').forEach((btn) => {
-          btn.addEventListener('click', async (e) => {
-            e.stopPropagation();
-            const id = btn.dataset.closeId;
-            if (confirm('Close this session?')) {
-              await removeSession(id);
-              renderSidePanel();
-            }
-          });
-        });
-        sidePanelList.querySelectorAll('.side-panel-card').forEach((card) => {
-          card.addEventListener('click', () => {
-            activateSession(card.dataset.id);
-            closeSidePanel();
-          });
-        });
-      }
-      document.getElementById('panel-toggle').addEventListener('click', openSidePanel);
-      document.getElementById('side-panel-close').addEventListener('click', closeSidePanel);
-      sidePanelBackdrop.addEventListener('click', closeSidePanel);
-      // ===== Drag to Reorder =====
-      function initTabDrag() {
-        let dragId = null;
-        let dragEl = null;
-        tabListEl.querySelectorAll('.session-tab').forEach((tab) => {
-          // --- Touch drag (long press) + preview ---
-          let longPressTimer = null;
-          let previewHoldTimer = null;
-          let startX = 0,
-            startY = 0;
-          let isDragging = false;
-          let didPreview = false;
-          tab.addEventListener(
-            'touchstart',
-            (e) => {
-              startX = e.touches[0].clientX;
-              startY = e.touches[0].clientY;
-              didPreview = false;
-              // 200ms: show preview (if not active tab)
-              if (tab.dataset.id !== activeId) {
-                previewHoldTimer = setTimeout(() => {
-                  didPreview = true;
-                  showPreview(tab, tab.dataset.id);
-                  if (navigator.vibrate) navigator.vibrate(30);
-                }, 200);
-              }
-              // 600ms: enter drag mode (dismiss preview)
-              longPressTimer = setTimeout(() => {
-                hidePreview();
-                isDragging = true;
-                dragId = tab.dataset.id;
-                dragEl = tab;
-                tab.classList.add('dragging');
-                if (navigator.vibrate) navigator.vibrate(50);
-              }, 600);
-            },
-            { passive: true },
-          );
-          tab.addEventListener('touchmove', (e) => {
-            const dx = Math.abs(e.touches[0].clientX - startX);
-            const dy = Math.abs(e.touches[0].clientY - startY);
-            if (!isDragging && (dx > 10 || dy > 10)) {
-              clearTimeout(longPressTimer);
-              clearTimeout(previewHoldTimer);
-              hidePreview();
-              return;
-            }
-            if (isDragging) {
-              e.preventDefault();
-              const touch = e.touches[0];
-              const el = document.elementFromPoint(touch.clientX, touch.clientY);
-              const target = el ? el.closest('.session-tab') : null;
-              if (target && target !== dragEl && target.dataset.id) {
-                const rect = target.getBoundingClientRect();
-                if (touch.clientX < rect.left + rect.width / 2) {
-                  target.parentNode.insertBefore(dragEl, target);
-                } else {
-                  target.parentNode.insertBefore(dragEl, target.nextSibling);
-                }
-              }
-            }
-          });
-          tab.addEventListener('touchend', () => {
-            clearTimeout(longPressTimer);
-            clearTimeout(previewHoldTimer);
-            hidePreview();
-            if (isDragging) {
-              isDragging = false;
-              dragEl.classList.remove('dragging');
-              // Save new order from DOM
-              const newOrder = [...tabListEl.querySelectorAll('.session-tab')].map(
-                (t) => t.dataset.id,
-              );
-              saveTabOrder(newOrder);
-              dragId = null;
-              dragEl = null;
-            }
-          });
-          // --- Desktop drag ---
-          tab.addEventListener('dragstart', (e) => {
-            dragId = tab.dataset.id;
-            dragEl = tab;
-            tab.classList.add('dragging');
-            e.dataTransfer.effectAllowed = 'move';
-          });
-          tab.addEventListener('dragover', (e) => {
-            e.preventDefault();
-            e.dataTransfer.dropEffect = 'move';
-          });
-          tab.addEventListener('drop', (e) => {
-            e.preventDefault();
-            if (dragId && tab.dataset.id !== dragId) {
-              const rect = tab.getBoundingClientRect();
-              if (e.clientX < rect.left + rect.width / 2) {
-                tab.parentNode.insertBefore(dragEl, tab);
-              } else {
-                tab.parentNode.insertBefore(dragEl, tab.nextSibling);
-              }
-              const newOrder = [...tabListEl.querySelectorAll('.session-tab')].map(
-                (t) => t.dataset.id,
-              );
-              saveTabOrder(newOrder);
-            }
-          });
-          tab.addEventListener('dragend', () => {
-            if (dragEl) dragEl.classList.remove('dragging');
-            dragId = null;
-            dragEl = null;
-          });
-        });
-      }
-      // ===== Split View =====
-      function toggleSplit() {
-        splitMode = !splitMode;
-        if (splitMode) {
-          // Find a second session to show
-          const order = getTabOrder();
-          const others = order.filter((id) => id !== activeId);
-          splitSecondId = others.length > 0 ? others[0] : null;
-          if (splitSecondId) {
-            const isMobile = window.innerWidth < 640;
-            terminalsWrapper.classList.add(isMobile ? 'split-v' : 'split-h');
-            managed.get(splitSecondId).container.classList.add('visible');
-          }
-        } else {
-          terminalsWrapper.classList.remove('split-h', 'split-v');
-          splitSecondId = null;
-          // Hide all except active
-          for (const [id, ms] of managed) {
-            ms.container.classList.toggle('visible', id === activeId);
-          }
-        }
-        requestAnimationFrame(() => {
-          for (const [, ms] of managed) {
-            if (ms.container.classList.contains('visible')) {
-              ms.fitAddon.fit();
-              sendResize(ms);
-            }
-          }
-        });
-        renderTabs();
-      }
-      // ===== Paste =====
-      function setupPaste() {
-        const pasteOverlay = document.getElementById('paste-overlay');
-        const pasteInput = document.getElementById('paste-input');
-        const pasteBtn = document.getElementById('paste-btn');
-        function openPasteModal() {
-          pasteInput.value = '';
-          pasteOverlay.classList.add('visible');
-          pasteInput.focus();
-        }
-        async function handlePaste() {
-          // Try image first via clipboard.read()
-          if (navigator.clipboard && navigator.clipboard.read) {
-            try {
-              const items = await navigator.clipboard.read();
-              for (const item of items) {
-                const imageType = item.types.find((t) => t.startsWith('image/'));
-                if (imageType) {
-                  const blob = await item.getType(imageType);
-                  const res = await fetch('/api/upload', {
-                    method: 'POST',
-                    headers: { 'Content-Type': imageType },
-                    body: blob,
-                    credentials: 'same-origin',
-                  });
-                  if (!res.ok) throw new Error('Upload failed');
-                  const data = await res.json();
-                  const ms = managed.get(activeId);
-                  if (ms && ms.ws && ms.ws.readyState === 1) {
-                    ms.ws.send(
-                      JSON.stringify({ type: 'input', data: (data.path || data.url) + ' ' }),
-                    );
-                  }
-                  return;
-                }
-              }
-            } catch (err) {
-              console.warn('clipboard.read failed:', err.message);
-            }
-          }
-          // Text paste
-          if (navigator.clipboard && navigator.clipboard.readText) {
-            try {
-              const text = await navigator.clipboard.readText();
-              if (text) {
-                const ms = managed.get(activeId);
-                if (ms && ms.ws && ms.ws.readyState === 1) {
-                  ms.ws.send(JSON.stringify({ type: 'input', data: text }));
-                  showToast('Pasted!');
-                }
-                return;
-              }
-            } catch (err) {
-              console.warn('clipboard.readText failed:', err.message);
-            }
-          }
-          openPasteModal();
-        }
-        // Use touchend directly for iOS Safari (click may not fire reliably)
-        let pasteTouched = false;
-        pasteBtn.addEventListener('touchend', (e) => {
-          e.preventDefault();
-          pasteTouched = true;
-          handlePaste();
-        });
-        pasteBtn.addEventListener('mousedown', (e) => e.preventDefault());
-        pasteBtn.addEventListener('click', () => {
-          if (pasteTouched) {
-            pasteTouched = false;
-            return;
-          }
-          handlePaste();
-        });
-        document.getElementById('paste-send').addEventListener('click', () => {
-          const text = pasteInput.value;
-          const ms = managed.get(activeId);
-          if (text && ms && ms.ws && ms.ws.readyState === 1) {
-            ms.ws.send(JSON.stringify({ type: 'input', data: text }));
-          }
-          pasteOverlay.classList.remove('visible');
-          pasteInput.value = '';
-        });
-        document.getElementById('paste-cancel').addEventListener('click', () => {
-          pasteOverlay.classList.remove('visible');
-          pasteInput.value = '';
-        });
-      }
-      // ===== Select Text Overlay =====
-      function setupSelectMode() {
-        const selectBtn = document.getElementById('select-btn');
-        const selectOverlay = document.getElementById('select-overlay');
-        const selectContent = document.getElementById('select-content');
-        const PAGE_SIZE = 200;
-        let allLines = [];
-        let loadedFrom = 0;
-        function renderLines(from, to) {
-          return allLines.slice(from, to).join('\n');
-        }
-        function openSelectOverlay() {
-          const ms = managed.get(activeId);
-          if (!ms) return;
-          const buf = ms.term.buffer.active;
-          allLines = [];
-          for (let i = 0; i < buf.length; i++) {
-            const line = buf.getLine(i);
-            if (line) allLines.push(line.translateToString(true));
-          }
-          // Trim trailing empty lines
-          while (allLines.length > 0 && allLines[allLines.length - 1].trim() === '') allLines.pop();
-          // Show last PAGE_SIZE lines
-          loadedFrom = Math.max(0, allLines.length - PAGE_SIZE);
-          selectContent.textContent = renderLines(loadedFrom, allLines.length);
-          // Show/hide "Load more" button
-          const loadMoreBtn = document.getElementById('select-load-more');
-          loadMoreBtn.style.display = loadedFrom > 0 ? 'block' : 'none';
-          loadMoreBtn.textContent = `▲ Load more (${loadedFrom} lines above)`;
-          // Show line count in title
-          const title = document.getElementById('select-title');
-          const shown = allLines.length - loadedFrom;
-          title.textContent =
-            allLines.length <= PAGE_SIZE
-              ? `Copy Text (${allLines.length} lines)`
-              : `Copy Text (${shown}/${allLines.length} lines)`;
-          selectBtn.style.display = 'none';
-          selectOverlay.classList.add('visible');
-          selectContent.scrollTop = selectContent.scrollHeight;
-        }
-        document.getElementById('select-load-more').addEventListener('click', () => {
-          const prevHeight = selectContent.scrollHeight;
-          const newFrom = Math.max(0, loadedFrom - PAGE_SIZE);
-          const chunk = renderLines(newFrom, loadedFrom);
-          selectContent.textContent = chunk + '\n' + selectContent.textContent;
-          loadedFrom = newFrom;
-          // Keep scroll position stable
-          selectContent.scrollTop = selectContent.scrollHeight - prevHeight;
-          const loadMoreBtn = document.getElementById('select-load-more');
-          loadMoreBtn.style.display = loadedFrom > 0 ? 'block' : 'none';
-          loadMoreBtn.textContent = loadedFrom > 0 ? `▲ Load more (${loadedFrom} lines above)` : '';
-          // Update title
-          const title = document.getElementById('select-title');
-          const shown = allLines.length - loadedFrom;
-          title.textContent = `Copy Text (${shown}/${allLines.length} lines)`;
-        });
-        selectBtn.addEventListener('mousedown', (e) => e.preventDefault());
-        selectBtn.addEventListener(
-          'touchend',
-          (e) => {
-            e.preventDefault();
-            const ms = managed.get(activeId);
-            if (ms) ms.term.blur();
-            openSelectOverlay();
-          },
-          { passive: false },
-        );
-        selectBtn.addEventListener('click', () => {
-          const ms = managed.get(activeId);
-          if (ms) ms.term.blur();
-          openSelectOverlay();
-        });
-        document.getElementById('select-copy').addEventListener('click', () => {
-          // Copy finger selection if any, otherwise copy all loaded text
-          const sel = window.getSelection();
-          const text = sel && sel.toString() ? sel.toString() : selectContent.textContent;
-          if (!text) return;
-          if (navigator.clipboard && navigator.clipboard.writeText) {
-            navigator.clipboard
-              .writeText(text)
-              .then(() => showToast('Copied!'))
-              .catch(() => {
-                copyFallback(text);
-              });
-          } else {
-            copyFallback(text);
-          }
-        });
-        document.getElementById('select-close').addEventListener('click', () => {
-          selectOverlay.classList.remove('visible');
-          selectContent.textContent = '';
-          allLines = [];
-          selectBtn.style.display = '';
-          const ms = managed.get(activeId);
-          if (ms) ms.term.focus();
-        });
-      }
-      // ===== Image Paste =====
-      function setupImagePaste() {
-        // Use capture phase so we intercept before xterm.js pastes a file path as text
-        document.addEventListener(
-          'paste',
-          async (e) => {
-            const items = e.clipboardData && e.clipboardData.items;
-            if (!items) return;
-            for (const item of items) {
-              if (item.type.startsWith('image/')) {
-                e.preventDefault();
-                e.stopPropagation();
-                const blob = item.getAsFile();
-                if (!blob) return;
-                try {
-                  const res = await fetch('/api/upload', {
-                    method: 'POST',
-                    headers: { 'Content-Type': item.type },
-                    body: blob,
-                    credentials: 'same-origin',
-                  });
-                  if (!res.ok) throw new Error('Upload failed');
-                  const data = await res.json();
-                  const ms = managed.get(activeId);
-                  if (ms && ms.ws && ms.ws.readyState === 1) {
-                    ms.ws.send(
-                      JSON.stringify({ type: 'input', data: (data.path || data.url) + ' ' }),
-                    );
-                  }
-                } catch (err) {
-                  showToast('Image paste failed');
-                }
-                return;
-              }
-            }
-          },
-          true,
-        );
-      }
-      // ===== File Upload =====
-      function setupUpload() {
-        const uploadInput = document.getElementById('upload-input');
-        const uploadModal = document.getElementById('upload-modal');
-        const uploadDirInput = document.getElementById('upload-dir');
-        const uploadFileList = document.getElementById('upload-file-list');
-        const uploadConfirmBtn = document.getElementById('upload-confirm');
-        const uploadCancelBtn = document.getElementById('upload-cancel');
-        const uploadBrowseBtn = document.getElementById('upload-browse-btn');
-        let pendingFiles = null;
-        const MAX_FILE_SIZE = 10 * 1024 * 1024;
-        function openUploadModal(files) {
-          pendingFiles = files;
-          const ms = managed.get(activeId);
-          const cwd = (ms && ms.cwd) || '';
-          uploadDirInput.value = cwd;
-          let hasOversized = false;
-          uploadFileList.innerHTML = '';
-          Array.from(files).forEach((f) => {
-            const oversized = f.size > MAX_FILE_SIZE;
-            if (oversized) hasOversized = true;
-            const row = document.createElement('div');
-            if (oversized) row.style.color = '#f87171';
-            row.textContent =
-              '📄 ' +
-              f.name +
-              ' (' +
-              formatSize(f.size) +
-              ')' +
-              (oversized ? ' exceeds 10 MB limit' : '');
-            uploadFileList.appendChild(row);
-          });
-          uploadConfirmBtn.disabled = hasOversized;
-          uploadConfirmBtn.style.opacity = hasOversized ? '0.5' : '1';
-          uploadModal.classList.add('visible');
-        }
-        function closeUploadModal() {
-          uploadModal.classList.remove('visible');
-          closeBrowseDropdown();
-          pendingFiles = null;
-        }
-        function formatSize(bytes) {
-          if (bytes < 1024) return bytes + ' B';
-          if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
-          return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
-        }
-        uploadInput.addEventListener('change', () => {
-          const files = uploadInput.files;
-          if (!files || !files.length || !activeId) return;
-          openUploadModal(files);
-        });
-        uploadCancelBtn.addEventListener('click', closeUploadModal);
-        uploadModal.addEventListener('click', (e) => {
-          if (e.target === uploadModal) closeUploadModal();
-        });
-        // Directory browsing (reuse /api/dirs)
-        let browseDropdown = null;
-        function closeBrowseDropdown() {
-          if (browseDropdown) {
-            browseDropdown.remove();
-            browseDropdown = null;
-          }
-        }
-        // Close dropdown when clicking outside
-        document.addEventListener('click', (e) => {
-          if (
-            browseDropdown &&
-            !browseDropdown.contains(e.target) &&
-            e.target !== uploadBrowseBtn
-          ) {
-            closeBrowseDropdown();
-          }
-        });
-        uploadBrowseBtn.addEventListener('click', async () => {
-          if (browseDropdown) {
-            closeBrowseDropdown();
-            return;
-          }
-          const q = uploadDirInput.value || '';
-          try {
-            const res = await fetch('/api/dirs?q=' + encodeURIComponent(q ? q + '/' : ''), {
-              credentials: 'same-origin',
-            });
-            if (!res.ok) throw new Error(`Failed to browse directories: ${res.status}`);
-            const data = await res.json();
-            if (!data.dirs || !data.dirs.length) return;
-            browseDropdown = document.createElement('div');
-            browseDropdown.style.cssText =
-              'position:absolute;left:0;right:0;bottom:100%;margin-bottom:4px;max-height:150px;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:6px;z-index:10;box-shadow:0 -4px 12px rgba(0,0,0,0.2);';
-            data.dirs.forEach((d) => {
-              const opt = document.createElement('div');
-              opt.textContent = d;
-              opt.style.cssText =
-                'padding:6px 10px;cursor:pointer;font-size:13px;color:var(--text);';
-              opt.addEventListener('mouseenter', () => (opt.style.background = 'var(--hover)'));
-              opt.addEventListener('mouseleave', () => (opt.style.background = 'none'));
-              opt.addEventListener('click', () => {
-                uploadDirInput.value = d;
-                closeBrowseDropdown();
-              });
-              browseDropdown.appendChild(opt);
-            });
-            uploadBrowseBtn.parentElement.style.position = 'relative';
-            uploadBrowseBtn.parentElement.appendChild(browseDropdown);
-          } catch {}
-        });
-        uploadConfirmBtn.addEventListener('click', async () => {
-          if (!pendingFiles || !pendingFiles.length || !activeId) return;
-          const targetDir = uploadDirInput.value.trim();
-          const filesToUpload = Array.from(pendingFiles);
-          closeUploadModal();
-          let uploaded = 0;
-          let failed = 0;
-          for (const file of filesToUpload) {
-            try {
-              const headers = {
-                'Content-Type': file.type || 'application/octet-stream',
-                'X-Filename': file.name,
-              };
-              if (targetDir) headers['X-Target-Dir'] = targetDir;
-              const res = await fetch(`/api/sessions/${activeId}/upload`, {
-                method: 'POST',
-                headers,
-                body: file,
-                credentials: 'same-origin',
-              });
-              if (!res.ok) {
-                const err = await res.json().catch(() => ({}));
-                throw new Error(err.error || 'Upload failed');
-              }
-              await res.json();
-              uploaded++;
-            } catch (err) {
-              failed++;
-              console.error('Upload error:', file.name, err);
-            }
-          }
-          if (uploaded > 0) {
-            const dir = targetDir || 'session directory';
-            showToast(`${uploaded} file${uploaded > 1 ? 's' : ''} uploaded to ${dir}`);
-          }
-          if (failed > 0) {
-            showToast(`${failed} file${failed > 1 ? 's' : ''} failed to upload`);
-          }
-        });
-      }
-      // ===== New Session Modal =====
-      let shellsLoaded = false;
-      function openNewSessionModal() {
-        loadShellsForModal();
-        document.getElementById('new-session-modal').classList.add('visible');
-      }
-      function setupNewSessionModal() {
-        document.getElementById('tab-new-btn').addEventListener('click', openNewSessionModal);
-        document.getElementById('side-panel-new-btn').addEventListener('click', () => {
-          closeSidePanel();
-          openNewSessionModal();
-        });
-        document.getElementById('ns-cancel').addEventListener('click', () => {
-          document.getElementById('new-session-modal').classList.remove('visible');
-        });
-        document.getElementById('new-session-modal').addEventListener('click', (e) => {
-          if (e.target.id === 'new-session-modal')
-            document.getElementById('new-session-modal').classList.remove('visible');
-        });
-        // Color picker
-        document.getElementById('ns-color-picker').addEventListener('click', (e) => {
-          const swatch = e.target.closest('.color-swatch');
-          if (!swatch) return;
-          document
-            .querySelectorAll('#ns-color-picker .color-swatch')
-            .forEach((s) => s.classList.remove('selected'));
-          swatch.classList.add('selected');
-        });
-        document.getElementById('ns-create').addEventListener('click', createNewSession);
-        // Folder browser
-        const nsCwdInput = document.getElementById('ns-cwd');
-        const nsBrowserOverlay = document.getElementById('ns-browser-overlay');
-        const nsBrowserList = document.getElementById('ns-browser-list');
-        const nsBrowserBreadcrumb = document.getElementById('ns-browser-breadcrumb');
-        const nsBrowserPath = document.getElementById('ns-browser-path');
-        let nsBrowsePath = '/';
-        let serverCwd = '/';
-        document.getElementById('ns-browse-btn').addEventListener('click', async () => {
-          if (serverCwd === '/') {
-            try {
-              const data = await fetch('/api/shells').then((r) => {
-                if (!r.ok) throw new Error(`${r.status}`);
-                return r.json();
-              });
-              if (data.cwd) serverCwd = data.cwd;
-            } catch {}
-          }
-          const initial = nsCwdInput.value.trim() || serverCwd;
-          nsBrowseNavigate(initial);
-          nsBrowserOverlay.classList.add('visible');
-        });
-        document.getElementById('ns-browser-close').addEventListener('click', () => {
-          nsBrowserOverlay.classList.remove('visible');
-        });
-        nsBrowserOverlay.addEventListener('click', (e) => {
-          if (e.target === nsBrowserOverlay) nsBrowserOverlay.classList.remove('visible');
-        });
-        document.getElementById('ns-browser-select').addEventListener('click', () => {
-          nsCwdInput.value = nsBrowsePath;
-          nsBrowserOverlay.classList.remove('visible');
-        });
-        async function nsBrowseNavigate(dir) {
-          nsBrowsePath = dir;
-          nsBrowserPath.textContent = dir;
-          nsBrowseRenderBreadcrumb(dir);
-          nsBrowserList.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="${escAttr(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="${escAttr(d)}">
-                <span class="folder-icon">📁</span>
-                <span class="folder-name">${esc(name)}</span>
-                <span class="folder-arrow">›</span>
-              </div>`;
-              })
-              .join('');
-            nsBrowserList.innerHTML = items || '<div class="browser-empty">No subfolders</div>';
-            nsBrowserList.querySelectorAll('.folder-item').forEach((el) => {
-              el.addEventListener('click', () => nsBrowseNavigate(el.dataset.path));
-            });
-            nsBrowserList.scrollTop = 0;
-          } catch {
-            nsBrowserList.innerHTML = '<div class="browser-empty">Error loading folders</div>';
-          }
-        }
-        function nsBrowseRenderBreadcrumb(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="${escAttr(accumulated)}">${esc(part)}</button>`;
-          });
-          nsBrowserBreadcrumb.innerHTML = html;
-          nsBrowserBreadcrumb.querySelectorAll('.crumb').forEach((el) => {
-            el.addEventListener('click', () => nsBrowseNavigate(el.dataset.path));
-          });
-          nsBrowserBreadcrumb.scrollLeft = nsBrowserBreadcrumb.scrollWidth;
-        }
-      }
-      async function loadShellsForModal() {
-        if (shellsLoaded) return;
-        const sel = document.getElementById('ns-shell');
-        try {
-          const data = await fetch('/api/shells').then((r) => {
-            if (!r.ok) throw new Error(`${r.status}`);
-            return r.json();
-          });
-          if (data.cwd) {
-            serverCwd = data.cwd;
-            document.getElementById('ns-cwd').placeholder = data.cwd;
-          }
-          sel.innerHTML = data.shells
-            .map(
-              (s) =>
-                '<option value="' +
-                escAttr(s.cmd) +
-                '"' +
-                (s.cmd === data.default ? ' selected' : '') +
-                '>' +
-                esc(s.name) +
-                ' (' +
-                esc(s.cmd) +
-                ')</option>',
-            )
-            .join('');
-          shellsLoaded = true;
-        } catch {
-          sel.innerHTML = '<option value="">Could not detect shells</option>';
-        }
-      }
-      async function createNewSession() {
-        const name = document.getElementById('ns-name').value.trim();
-        const shell = document.getElementById('ns-shell').value;
-        const cwd = document.getElementById('ns-cwd').value.trim();
-        const cmd = document.getElementById('ns-cmd').value.trim();
-        const colorEl = document.querySelector('#ns-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 (cmd) body.initialCommand = cmd;
-        if (color) body.color = color;
-        // Include current terminal dimensions so the PTY spawns at the right
-        // size — prevents oh-my-posh and other slow prompts from rendering
-        // at the default 120×30 size and triggering a duplicate on SIGWINCH.
-        const activeMs = managed.get(activeId);
-        if (activeMs && activeMs.fitAddon) {
-          const dims = activeMs.fitAddon.proposeDimensions();
-          if (dims) {
-            body.cols = dims.cols;
-            body.rows = dims.rows;
-          }
-        }
-        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();
-          // Fetch full session list to get the new session data
-          const listRes = await fetch('/api/sessions');
-          if (!listRes.ok) throw new Error(`Failed to list sessions: ${listRes.status}`);
-          const list = await listRes.json();
-          const newSession = list.find((s) => s.id === data.id);
-          if (newSession) {
-            addSession(newSession);
-            activateSession(data.id);
-          }
-          document.getElementById('new-session-modal').classList.remove('visible');
-          document.getElementById('ns-name').value = '';
-          document.getElementById('ns-cmd').value = '';
-          document.getElementById('ns-cwd').value = '';
-        } catch (err) {
-          console.error('Failed to create session:', err);
-        }
-      }
-      // ===== Polling =====
-      function startPolling() {
-        setInterval(async () => {
-          try {
-            const pollRes = await fetch('/api/sessions');
-            if (!pollRes.ok) throw new Error(`${pollRes.status}`);
-            const list = await pollRes.json();
-            const serverIds = new Set(list.map((s) => s.id));
-            // Add new sessions created elsewhere
-            for (const s of list) {
-              if (!managed.has(s.id)) {
-                addSession(s);
-              } else {
-                // Update metadata
-                const ms = managed.get(s.id);
-                ms.name = s.name;
-                ms.color = s.color;
-                ms.cwd = s.cwd;
-                ms.lastActivity = s.lastActivity;
-                ms.git = s.git || null;
-              }
-            }
-            // Remove sessions deleted elsewhere
-            for (const id of [...managed.keys()]) {
-              if (!serverIds.has(id)) {
-                const ms = managed.get(id);
-                ms.exited = true;
-                if (ms.reconnectTimer) {
-                  clearTimeout(ms.reconnectTimer);
-                  ms.reconnectTimer = null;
-                }
-                if (ms.silenceTimer) {
-                  clearTimeout(ms.silenceTimer);
-                  ms.silenceTimer = null;
-                }
-                if (ms.ws)
-                  try {
-                    ms.ws.close();
-                  } catch {}
-                ms.term.dispose();
-                ms.container.remove();
-                managed.delete(id);
-                if (id === splitSecondId) splitSecondId = null;
-                if (id === activeId) {
-                  const remaining = [...managed.keys()];
-                  if (remaining.length > 0) activateSession(remaining[0]);
-                  else {
-                    window.location.replace('/');
-                    return;
-                  }
-                }
-              }
-            }
-            renderTabs();
-          } catch {}
-        }, 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 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();
-      }
-      function openPreviewModal() {
-        const modal = document.getElementById('preview-modal');
-        const input = document.getElementById('preview-port-input');
-        const status = document.getElementById('preview-detect-status');
-        const hint = document.getElementById('preview-hint');
-        const hintText = document.getElementById('preview-hint-text');
-        input.value = '';
-        hint.style.display = 'none';
-        status.textContent = '';
-        modal.classList.add('visible');
-        input.focus();
-        if (activeId) {
-          status.textContent = 'detecting…';
-          fetch('/api/sessions/' + activeId + '/detect-port')
-            .then((r) => (r.ok ? r.json() : null))
-            .then((data) => {
-              status.textContent = '';
-              if (data && data.detected) {
-                input.value = data.port;
-                input.select();
-                hintText.textContent = 'Detected port ' + data.port + ' from terminal output';
-                hint.style.display = 'flex';
-              }
-            })
-            .catch(() => {
-              status.textContent = '';
-            });
-        }
-      }
-      function submitPreview() {
-        const input = document.getElementById('preview-port-input');
-        const port = parseInt(input.value, 10);
-        if (isNaN(port) || port < 1 || port > 65535) {
-          input.style.borderColor = '#f87171';
-          input.focus();
-          setTimeout(() => (input.style.borderColor = ''), 1500);
-          return;
-        }
-        window.open('/preview/' + port + '/', '_blank');
-        document.getElementById('preview-modal').classList.remove('visible');
-      }
-      function setupPreviewModal() {
-        document.getElementById('preview-cancel').addEventListener('click', () => {
-          document.getElementById('preview-modal').classList.remove('visible');
-        });
-        document.getElementById('preview-open').addEventListener('click', submitPreview);
-        document.getElementById('preview-port-input').addEventListener('keydown', (e) => {
-          if (e.key === 'Enter') submitPreview();
-        });
-        document.getElementById('preview-modal').addEventListener('click', (e) => {
-          if (e.target.id === 'preview-modal')
-            document.getElementById('preview-modal').classList.remove('visible');
-        });
-      }
-      async function shareLink() {
-        const urlPromise = fetch('/api/share-token')
-          .then((r) => (r.ok ? r.json() : null))
-          .then((data) => (data && data.url) || location.href)
-          .catch(() => location.href);
-        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 })]);
-            showToast('Link copied!');
-            return;
-          } catch {}
-        }
-        const url = await urlPromise;
-        if (navigator.clipboard && navigator.clipboard.writeText) {
-          try {
-            await navigator.clipboard.writeText(url);
-            showToast('Link copied!');
-            return;
-          } catch {}
-        }
-        if (copyToClipboardFallback(url)) {
-          showToast('Link copied!');
-        } else {
-          showShareUrlPrompt(url);
-        }
-      }
-      async function refreshApp() {
-        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();
-      }
-      // ===== Command Palette =====
-      (function setupPalette() {
-        const paletteActions = [
-          {
-            icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>',
-            label: 'New tab',
-            category: 'Session',
-            action: () => openNewSessionModal(),
-          },
-          {
-            icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>',
-            label: 'Upload files',
-            category: 'Session',
-            action: () => {
-              if (!activeId) {
-                showToast('No active session');
-                return;
-              }
-              document.getElementById('upload-input').value = '';
-              document.getElementById('upload-input').click();
-            },
-          },
-          {
-            icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',
-            label: 'Close tab',
-            category: 'Session',
-            action: () => {
-              if (!activeId) return;
-              const ms = managed.get(activeId);
-              const name = (ms && ms.name) || activeId.slice(0, 8);
-              if (confirm('Close session "' + name + '"?')) {
-                removeSession(activeId);
-              }
-            },
-          },
-          {
-            icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/></svg>',
-            label: 'Rename session',
-            category: 'Session',
-            action: () => {
-              if (!activeId) return;
-              const ms = managed.get(activeId);
-              if (!ms) return;
-              const name = prompt('Rename session:', ms.name || '');
-              if (name !== null && name.trim()) {
-                ms.name = name.trim();
-                renderTabs();
-                updateStatusBar();
-              }
-            },
-          },
-          {
-            icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="12" y1="3" x2="12" y2="21"/></svg>',
-            label: 'Split view',
-            category: 'Session',
-            action: () => toggleSplit(),
-          },
-          {
-            icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>',
-            label: 'Stop session',
-            category: 'Session',
-            action: () => {
-              if (!activeId) return;
-              if (!confirm('Stop this session? The process will be killed.')) return;
-              removeSession(activeId);
-            },
-          },
-          {
-            icon: '<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="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>',
-            label: 'Find in terminal',
-            category: 'Search',
-            action: () => openSearchBar(),
-          },
-          {
-            icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>',
-            label: 'Increase font size',
-            category: 'View',
-            action: () => applyZoom(fontSize + 1),
-          },
-          {
-            icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/></svg>',
-            label: 'Decrease font size',
-            category: 'View',
-            action: () => applyZoom(fontSize - 1),
-          },
-          {
-            icon: '<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>',
-            get label() {
-              const current = THEMES.find((x) => x.id === getTheme()) || THEMES[0];
-              return 'Theme (' + current.name + ')';
-            },
-            category: 'View',
-            action: () => {
-              openThemeSubpanel();
-            },
-          },
-          {
-            icon: '<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="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>',
-            label: 'Preview port',
-            category: 'View',
-            action: () => openPreviewModal(),
-          },
-          {
-            icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>',
-            label: 'Copy link',
-            category: 'Share',
-            action: shareLink,
-          },
-          {
-            icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>',
-            get label() {
-              return notificationsEnabled ? 'Notifications (on)' : 'Notifications (off)';
-            },
-            category: 'Notifications',
-            keepOpen: true,
-            action: () => {
-              notificationsEnabled = !notificationsEnabled;
-              localStorage.setItem('termbeam-notifications', notificationsEnabled);
-              if (
-                notificationsEnabled &&
-                'Notification' in window &&
-                Notification.permission === 'default'
-              ) {
-                Notification.requestPermission();
-              }
-              showToast(notificationsEnabled ? 'Notifications on' : 'Notifications off');
-              renderPalette();
-            },
-          },
-          {
-            icon: '<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>',
-            label: 'Refresh',
-            category: 'System',
-            action: () => refreshApp(),
-          },
-          {
-            icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 4H8l-7 8 7 8h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"/><line x1="18" y1="9" x2="12" y2="15"/><line x1="12" y1="9" x2="18" y2="15"/></svg>',
-            label: 'Clear terminal',
-            category: 'System',
-            action: () => {
-              if (!activeId) return;
-              const ms = managed.get(activeId);
-              if (ms) ms.term.clear();
-            },
-          },
-          {
-            icon: '<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="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>',
-            label: 'About',
-            category: 'System',
-            action: () => {
-              const ver = window._termbeamVersion || 'TermBeam';
-              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:24px;max-width:90vw;width:320px;text-align:center;';
-              box.innerHTML =
-                '<div style="font-size:24px;margin-bottom:8px;">⚡</div>' +
-                '<div style="font-size:16px;font-weight:600;color:var(--text);margin-bottom:4px;">TermBeam</div>' +
-                '<div style="font-size:13px;color:var(--text-secondary);margin-bottom:12px;">' +
-                esc(ver) +
-                '</div>' +
-                '<div style="font-size:12px;color:var(--text-secondary);margin-bottom:16px;">Terminal in your browser, optimized for mobile.</div>' +
-                '<div style="display:flex;gap:16px;justify-content:center;margin-bottom:16px;">' +
-                '<a href="https://github.com/dorlugasigal/TermBeam" target="_blank" rel="noopener" style="color:var(--accent);font-size:12px;text-decoration:none;">GitHub</a>' +
-                '<a href="https://dorlugasigal.github.io/TermBeam/" target="_blank" rel="noopener" style="color:var(--accent);font-size:12px;text-decoration:none;">Docs</a>' +
-                '<a href="https://termbeam.pages.dev" target="_blank" rel="noopener" style="color:var(--accent);font-size:12px;text-decoration:none;">Website</a>' +
-                '</div>' +
-                '<div id="about-update-area" style="margin-bottom:12px;"></div>';
-              const updateArea = box.querySelector('#about-update-area');
-              const updateBtn = document.createElement('button');
-              updateBtn.textContent = 'Check for updates';
-              updateBtn.style.cssText =
-                'padding:6px 16px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--text-secondary);font-size:12px;cursor:pointer;';
-              updateBtn.onclick = async () => {
-                updateBtn.textContent = 'Checking...';
-                updateBtn.disabled = true;
-                updateBtn.style.cursor = 'default';
-                try {
-                  const res = await fetch('/api/update-check?force=true');
-                  if (!res.ok) throw new Error();
-                  const info = await res.json();
-                  if (info.updateAvailable && info.latest) {
-                    const cmd = info.command || 'npm install -g termbeam@latest';
-                    updateArea.innerHTML = '';
-                    const status = document.createElement('div');
-                    status.style.cssText = 'font-size:12px;color:var(--accent);margin-bottom:8px;';
-                    status.textContent = 'v' + info.latest + ' available';
-                    updateArea.appendChild(status);
-                    const cmdRow = document.createElement('div');
-                    cmdRow.style.cssText =
-                      'display:flex;align-items:center;justify-content:center;gap:6px;';
-                    const cmdText = document.createElement('code');
-                    cmdText.textContent = cmd;
-                    cmdText.style.cssText =
-                      'font-size:11px;color:var(--accent);background:var(--bg);padding:4px 8px;border-radius:4px;border:1px solid var(--border);';
-                    const copyBtn = document.createElement('button');
-                    copyBtn.textContent = 'Copy';
-                    copyBtn.style.cssText =
-                      'padding:4px 10px;border-radius:4px;border:1px solid var(--accent);background:transparent;color:var(--accent);font-size:11px;cursor:pointer;';
-                    copyBtn.onclick = () => {
-                      const onSuccess = () => {
-                        copyBtn.textContent = 'Copied!';
-                        setTimeout(() => {
-                          copyBtn.textContent = 'Copy';
-                        }, 2000);
-                      };
-                      if (navigator.clipboard && navigator.clipboard.writeText) {
-                        navigator.clipboard
-                          .writeText(cmd)
-                          .then(onSuccess)
-                          .catch(() => {
-                            copyFallback(cmd);
-                            onSuccess();
-                          });
-                      } else {
-                        copyFallback(cmd);
-                        onSuccess();
-                      }
-                    };
-                    cmdRow.appendChild(cmdText);
-                    cmdRow.appendChild(copyBtn);
-                    updateArea.appendChild(cmdRow);
-                  } else {
-                    updateBtn.textContent = 'Up to date';
-                    updateBtn.style.color = '#4ec9b0';
-                    updateBtn.style.borderColor = '#4ec9b0';
-                  }
-                } catch {
-                  updateBtn.textContent = 'Check failed — try again';
-                  updateBtn.disabled = false;
-                  updateBtn.style.cursor = 'pointer';
-                }
-              };
-              updateArea.appendChild(updateBtn);
-              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);
-            },
-          },
-        ];
-        const backdrop = document.getElementById('palette-backdrop');
-        const panel = document.getElementById('palette-panel');
-        const body = document.getElementById('palette-body');
-        function renderPalette() {
-          const grouped = {};
-          paletteActions.forEach((a) => {
-            if (!grouped[a.category]) grouped[a.category] = [];
-            grouped[a.category].push(a);
-          });
-          body.innerHTML = '';
-          Object.keys(grouped).forEach((cat) => {
-            const header = document.createElement('div');
-            header.className = 'palette-category';
-            header.textContent = cat;
-            body.appendChild(header);
-            grouped[cat].forEach((a) => {
-              const btn = document.createElement('button');
-              btn.className = 'palette-action';
-              btn.innerHTML =
-                '<span class="palette-action-icon">' + a.icon + '</span>' + esc(a.label);
-              btn.addEventListener('click', () => {
-                a.action();
-                if (!a.keepOpen) closePalette();
-              });
-              body.appendChild(btn);
-            });
-          });
-        }
-        function openPalette() {
-          backdrop.classList.add('open');
-          panel.classList.add('open');
-        }
-        function closePalette() {
-          backdrop.classList.remove('open');
-          panel.classList.remove('open');
-        }
-        function togglePalette() {
-          if (panel.classList.contains('open')) closePalette();
-          else openPalette();
-        }
-        backdrop.addEventListener('click', closePalette);
-        document.getElementById('palette-close').addEventListener('click', closePalette);
-        document.getElementById('palette-trigger').addEventListener('click', togglePalette);
-        document.addEventListener('keydown', (e) => {
-          if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
-            e.preventDefault();
-            togglePalette();
-          }
-          if (e.key === 'Escape' && panel.classList.contains('open')) {
-            closePalette();
-          }
-        });
-        renderPalette();
-      })();
-      // ===== Theme Sub-Panel =====
-      (function setupThemeSubpanel() {
-        const subpanel = document.getElementById('theme-subpanel');
-        const list = document.getElementById('theme-subpanel-list');
-        document.getElementById('theme-subpanel-close').addEventListener('click', () => {
-          subpanel.classList.remove('open');
-        });
-        function renderThemeList() {
-          const cur = getTheme();
-          list.innerHTML = THEMES.map(
-            (t) =>
-              '<button class="theme-subpanel-item' +
-              (t.id === cur ? ' active' : '') +
-              '" data-tid="' +
-              t.id +
-              '"><span class="theme-subpanel-swatch" style="background:' +
-              t.bg +
-              '"></span>' +
-              esc(t.name) +
-              '</button>',
-          ).join('');
-          list.querySelectorAll('.theme-subpanel-item').forEach((btn) => {
-            btn.addEventListener('click', () => {
-              applyTheme(btn.dataset.tid);
-              renderThemeList();
-            });
-          });
-        }
-        window.openThemeSubpanel = function () {
-          renderThemeList();
-          subpanel.classList.add('open');
-        };
-        document.addEventListener('keydown', (e) => {
-          if (e.key === 'Escape' && subpanel.classList.contains('open')) {
-            subpanel.classList.remove('open');
-          }
-        });
-      })();
-      // ===== Service Worker =====
-      registerServiceWorker();
-    </script>
-  </body>
-</html>