termbeam 1.2.10 → 1.4.0

package/public/terminal.html

@@ -63,6 +63,216 @@
         --key-special-bg: #adb5bd;
         --overlay-bg: rgba(0, 0, 0, 0.5);
       }
+      [data-theme='monokai'] {
+        --bg: #272822;
+        --surface: #1e1f1c;
+        --border: #49483e;
+        --border-subtle: #5c5c4f;
+        --text: #f8f8f2;
+        --text-secondary: #a59f85;
+        --text-dim: #75715e;
+        --text-muted: #5a5854;
+        --accent: #a6e22e;
+        --accent-hover: #b8f53c;
+        --accent-active: #8acc16;
+        --danger: #f92672;
+        --danger-hover: #e0155d;
+        --success: #a6e22e;
+        --key-bg: #49483e;
+        --key-border: #5c5c4f;
+        --key-shadow: rgba(0, 0, 0, 0.4);
+        --key-special-bg: #3e3d32;
+        --overlay-bg: rgba(0, 0, 0, 0.75);
+      }
+      [data-theme='solarized-dark'] {
+        --bg: #002b36;
+        --surface: #073642;
+        --border: #586e75;
+        --border-subtle: #657b83;
+        --text: #839496;
+        --text-secondary: #657b83;
+        --text-dim: #586e75;
+        --text-muted: #4a5a62;
+        --accent: #268bd2;
+        --accent-hover: #379ce3;
+        --accent-active: #1a7abf;
+        --danger: #dc322f;
+        --danger-hover: #c8221f;
+        --success: #859900;
+        --key-bg: #073642;
+        --key-border: #586e75;
+        --key-shadow: rgba(0, 0, 0, 0.3);
+        --key-special-bg: #002b36;
+        --overlay-bg: rgba(0, 0, 0, 0.75);
+      }
+      [data-theme='solarized-light'] {
+        --bg: #fdf6e3;
+        --surface: #eee8d5;
+        --border: #93a1a1;
+        --border-subtle: #839496;
+        --text: #657b83;
+        --text-secondary: #93a1a1;
+        --text-dim: #a0a0a0;
+        --text-muted: #b0b0b0;
+        --accent: #268bd2;
+        --accent-hover: #379ce3;
+        --accent-active: #1a7abf;
+        --danger: #dc322f;
+        --danger-hover: #c8221f;
+        --success: #859900;
+        --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.4);
+      }
+      [data-theme='nord'] {
+        --bg: #2e3440;
+        --surface: #3b4252;
+        --border: #434c5e;
+        --border-subtle: #4c566a;
+        --text: #d8dee9;
+        --text-secondary: #b0bac9;
+        --text-dim: #7b88a1;
+        --text-muted: #5c6a85;
+        --accent: #88c0d0;
+        --accent-hover: #9fd4e4;
+        --accent-active: #6aafbf;
+        --danger: #bf616a;
+        --danger-hover: #a84d57;
+        --success: #a3be8c;
+        --key-bg: #434c5e;
+        --key-border: #4c566a;
+        --key-shadow: rgba(0, 0, 0, 0.3);
+        --key-special-bg: #3b4252;
+        --overlay-bg: rgba(0, 0, 0, 0.75);
+      }
+      [data-theme='dracula'] {
+        --bg: #282a36;
+        --surface: #343746;
+        --border: #44475a;
+        --border-subtle: #525568;
+        --text: #f8f8f2;
+        --text-secondary: #c1c4d2;
+        --text-dim: #8e92a4;
+        --text-muted: #6272a4;
+        --accent: #bd93f9;
+        --accent-hover: #d0b0ff;
+        --accent-active: #a77de7;
+        --danger: #ff5555;
+        --danger-hover: #e03d3d;
+        --success: #50fa7b;
+        --key-bg: #44475a;
+        --key-border: #525568;
+        --key-shadow: rgba(0, 0, 0, 0.4);
+        --key-special-bg: #343746;
+        --overlay-bg: rgba(0, 0, 0, 0.75);
+      }
+      [data-theme='github-dark'] {
+        --bg: #0d1117;
+        --surface: #161b22;
+        --border: #30363d;
+        --border-subtle: #3d444d;
+        --text: #c9d1d9;
+        --text-secondary: #8b949e;
+        --text-dim: #6e7681;
+        --text-muted: #484f58;
+        --accent: #58a6ff;
+        --accent-hover: #79b8ff;
+        --accent-active: #388bfd;
+        --danger: #f85149;
+        --danger-hover: #da3633;
+        --success: #3fb950;
+        --key-bg: #161b22;
+        --key-border: #30363d;
+        --key-shadow: rgba(0, 0, 0, 0.4);
+        --key-special-bg: #0d1117;
+        --overlay-bg: rgba(0, 0, 0, 0.75);
+      }
+      [data-theme='one-dark'] {
+        --bg: #282c34;
+        --surface: #21252b;
+        --border: #3e4452;
+        --border-subtle: #4b5263;
+        --text: #abb2bf;
+        --text-secondary: #7f848e;
+        --text-dim: #5c6370;
+        --text-muted: #4b5263;
+        --accent: #61afef;
+        --accent-hover: #7dc0ff;
+        --accent-active: #4d9ede;
+        --danger: #e06c75;
+        --danger-hover: #c95c67;
+        --success: #98c379;
+        --key-bg: #3e4452;
+        --key-border: #4b5263;
+        --key-shadow: rgba(0, 0, 0, 0.3);
+        --key-special-bg: #21252b;
+        --overlay-bg: rgba(0, 0, 0, 0.75);
+      }
+      [data-theme='catppuccin'] {
+        --bg: #1e1e2e;
+        --surface: #313244;
+        --border: #45475a;
+        --border-subtle: #585b70;
+        --text: #cdd6f4;
+        --text-secondary: #a6adc8;
+        --text-dim: #7f849c;
+        --text-muted: #585b70;
+        --accent: #89b4fa;
+        --accent-hover: #b4d0ff;
+        --accent-active: #5c9de3;
+        --danger: #f38ba8;
+        --danger-hover: #eb7c9d;
+        --success: #a6e3a1;
+        --key-bg: #45475a;
+        --key-border: #585b70;
+        --key-shadow: rgba(0, 0, 0, 0.3);
+        --key-special-bg: #313244;
+        --overlay-bg: rgba(0, 0, 0, 0.75);
+      }
+      [data-theme='gruvbox'] {
+        --bg: #282828;
+        --surface: #3c3836;
+        --border: #504945;
+        --border-subtle: #665c54;
+        --text: #ebdbb2;
+        --text-secondary: #d5c4a1;
+        --text-dim: #a89984;
+        --text-muted: #7c6f64;
+        --accent: #83a598;
+        --accent-hover: #9dbfb4;
+        --accent-active: #6a8f8a;
+        --danger: #fb4934;
+        --danger-hover: #e33826;
+        --success: #b8bb26;
+        --key-bg: #504945;
+        --key-border: #665c54;
+        --key-shadow: rgba(0, 0, 0, 0.4);
+        --key-special-bg: #3c3836;
+        --overlay-bg: rgba(0, 0, 0, 0.75);
+      }
+      [data-theme='night-owl'] {
+        --bg: #011627;
+        --surface: #0d2a45;
+        --border: #1d3b53;
+        --border-subtle: #264863;
+        --text: #d6deeb;
+        --text-secondary: #8badc1;
+        --text-dim: #5f7e97;
+        --text-muted: #3f5f7d;
+        --accent: #7fdbca;
+        --accent-hover: #9ff0e0;
+        --accent-active: #62c5b5;
+        --danger: #ef5350;
+        --danger-hover: #d83130;
+        --success: #addb67;
+        --key-bg: #1d3b53;
+        --key-border: #264863;
+        --key-shadow: rgba(0, 0, 0, 0.4);
+        --key-special-bg: #0d2a45;
+        --overlay-bg: rgba(0, 0, 0, 0.75);
+      }
       @font-face {
         font-family: 'NerdFont';
         src: url('https://cdn.jsdelivr.net/gh/ryanoasis/nerd-fonts@latest/patched-fonts/JetBrainsMono/Ligatures/Regular/JetBrainsMonoNerdFont-Regular.ttf')
@@ -248,6 +458,23 @@
       .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;
@@ -382,6 +609,52 @@
         font-size: 14px;
         font-weight: 600;
       }
+      .theme-wrap {
+        position: relative;
+        display: flex;
+        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;
@@ -467,6 +740,9 @@
       [data-theme='light'] #key-bar {
         background: #d1d3d9;
       }
+      [data-theme='solarized-light'] #key-bar {
+        background: #d1d3d9;
+      }
       .key-row {
         display: flex;
         align-items: center;
@@ -502,6 +778,10 @@
         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);
@@ -510,6 +790,9 @@
       [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;
@@ -519,6 +802,10 @@
         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);
@@ -530,6 +817,11 @@
         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;
@@ -563,6 +855,10 @@
         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;
@@ -1381,7 +1677,7 @@
         #back-btn {
           display: none;
         }
-        #theme-toggle {
+        #theme-wrap {
           display: flex;
         }
         #stop-btn {
@@ -1572,28 +1868,66 @@
             <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
           </svg>
         </button>
-        <button class="bar-btn" id="theme-toggle" title="Toggle theme">
-          <svg
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <circle cx="12" cy="12" r="5" />
-            <line x1="12" y1="1" x2="12" y2="3" />
-            <line x1="12" y1="21" x2="12" y2="23" />
-            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
-            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
-            <line x1="1" y1="12" x2="3" y2="12" />
-            <line x1="21" y1="12" x2="23" y2="12" />
-            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
-            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
-          </svg>
-        </button>
+        <div 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 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
@@ -1970,29 +2304,296 @@
         brightCyan: '#0598bc',
         brightWhite: '#a5a5a5',
       };
+      const monokaiTermTheme = {
+        background: '#272822',
+        foreground: '#f8f8f2',
+        cursor: '#f8f8f0',
+        cursorAccent: '#272822',
+        selectionBackground: 'rgba(166, 226, 46, 0.3)',
+        black: '#272822',
+        red: '#f92672',
+        green: '#a6e22e',
+        yellow: '#f4bf75',
+        blue: '#66d9e8',
+        magenta: '#ae81ff',
+        cyan: '#a1efe4',
+        white: '#f8f8f2',
+        brightBlack: '#75715e',
+        brightRed: '#f92672',
+        brightGreen: '#a6e22e',
+        brightYellow: '#f4bf75',
+        brightBlue: '#66d9e8',
+        brightMagenta: '#ae81ff',
+        brightCyan: '#a1efe4',
+        brightWhite: '#f9f8f5',
+      };
+      const solarizedDarkTermTheme = {
+        background: '#002b36',
+        foreground: '#839496',
+        cursor: '#839496',
+        cursorAccent: '#002b36',
+        selectionBackground: 'rgba(7, 54, 66, 0.8)',
+        black: '#073642',
+        red: '#dc322f',
+        green: '#859900',
+        yellow: '#b58900',
+        blue: '#268bd2',
+        magenta: '#d33682',
+        cyan: '#2aa198',
+        white: '#eee8d5',
+        brightBlack: '#002b36',
+        brightRed: '#cb4b16',
+        brightGreen: '#586e75',
+        brightYellow: '#657b83',
+        brightBlue: '#839496',
+        brightMagenta: '#6c71c4',
+        brightCyan: '#93a1a1',
+        brightWhite: '#fdf6e3',
+      };
+      const solarizedLightTermTheme = {
+        background: '#fdf6e3',
+        foreground: '#657b83',
+        cursor: '#586e75',
+        cursorAccent: '#fdf6e3',
+        selectionBackground: 'rgba(238, 232, 213, 0.8)',
+        black: '#073642',
+        red: '#dc322f',
+        green: '#859900',
+        yellow: '#b58900',
+        blue: '#268bd2',
+        magenta: '#d33682',
+        cyan: '#2aa198',
+        white: '#eee8d5',
+        brightBlack: '#002b36',
+        brightRed: '#cb4b16',
+        brightGreen: '#586e75',
+        brightYellow: '#657b83',
+        brightBlue: '#839496',
+        brightMagenta: '#6c71c4',
+        brightCyan: '#93a1a1',
+        brightWhite: '#fdf6e3',
+      };
+      const nordTermTheme = {
+        background: '#2e3440',
+        foreground: '#d8dee9',
+        cursor: '#d8dee9',
+        cursorAccent: '#2e3440',
+        selectionBackground: 'rgba(67, 76, 94, 0.5)',
+        black: '#3b4252',
+        red: '#bf616a',
+        green: '#a3be8c',
+        yellow: '#ebcb8b',
+        blue: '#81a1c1',
+        magenta: '#b48ead',
+        cyan: '#88c0d0',
+        white: '#e5e9f0',
+        brightBlack: '#4c566a',
+        brightRed: '#bf616a',
+        brightGreen: '#a3be8c',
+        brightYellow: '#ebcb8b',
+        brightBlue: '#81a1c1',
+        brightMagenta: '#b48ead',
+        brightCyan: '#8fbcbb',
+        brightWhite: '#eceff4',
+      };
+      const draculaTermTheme = {
+        background: '#282a36',
+        foreground: '#f8f8f2',
+        cursor: '#f8f8f2',
+        cursorAccent: '#282a36',
+        selectionBackground: 'rgba(68, 71, 90, 0.7)',
+        black: '#21222c',
+        red: '#ff5555',
+        green: '#50fa7b',
+        yellow: '#f1fa8c',
+        blue: '#bd93f9',
+        magenta: '#ff79c6',
+        cyan: '#8be9fd',
+        white: '#f8f8f2',
+        brightBlack: '#6272a4',
+        brightRed: '#ff6e6e',
+        brightGreen: '#69ff94',
+        brightYellow: '#ffffa5',
+        brightBlue: '#d6acff',
+        brightMagenta: '#ff92df',
+        brightCyan: '#a4ffff',
+        brightWhite: '#ffffff',
+      };
+      const githubDarkTermTheme = {
+        background: '#0d1117',
+        foreground: '#c9d1d9',
+        cursor: '#c9d1d9',
+        cursorAccent: '#0d1117',
+        selectionBackground: 'rgba(56, 139, 253, 0.3)',
+        black: '#484f58',
+        red: '#ff7b72',
+        green: '#3fb950',
+        yellow: '#d29922',
+        blue: '#58a6ff',
+        magenta: '#bc8cff',
+        cyan: '#39c5cf',
+        white: '#c9d1d9',
+        brightBlack: '#6e7681',
+        brightRed: '#ffa198',
+        brightGreen: '#56d364',
+        brightYellow: '#e3b341',
+        brightBlue: '#79c0ff',
+        brightMagenta: '#d2a8ff',
+        brightCyan: '#56d4dd',
+        brightWhite: '#f0f6fc',
+      };
+      const oneDarkTermTheme = {
+        background: '#282c34',
+        foreground: '#abb2bf',
+        cursor: '#528bff',
+        cursorAccent: '#282c34',
+        selectionBackground: 'rgba(62, 68, 82, 0.7)',
+        black: '#3f4451',
+        red: '#e06c75',
+        green: '#98c379',
+        yellow: '#e5c07b',
+        blue: '#61afef',
+        magenta: '#c678dd',
+        cyan: '#56b6c2',
+        white: '#d7dae0',
+        brightBlack: '#4f5666',
+        brightRed: '#e06c75',
+        brightGreen: '#98c379',
+        brightYellow: '#e5c07b',
+        brightBlue: '#61afef',
+        brightMagenta: '#c678dd',
+        brightCyan: '#56b6c2',
+        brightWhite: '#ffffff',
+      };
+      const catppuccinTermTheme = {
+        background: '#1e1e2e',
+        foreground: '#cdd6f4',
+        cursor: '#f5e0dc',
+        cursorAccent: '#1e1e2e',
+        selectionBackground: 'rgba(88, 91, 112, 0.5)',
+        black: '#45475a',
+        red: '#f38ba8',
+        green: '#a6e3a1',
+        yellow: '#f9e2af',
+        blue: '#89b4fa',
+        magenta: '#f5c2e7',
+        cyan: '#94e2d5',
+        white: '#bac2de',
+        brightBlack: '#585b70',
+        brightRed: '#f38ba8',
+        brightGreen: '#a6e3a1',
+        brightYellow: '#f9e2af',
+        brightBlue: '#89b4fa',
+        brightMagenta: '#f5c2e7',
+        brightCyan: '#94e2d5',
+        brightWhite: '#a6adc8',
+      };
+      const gruvboxTermTheme = {
+        background: '#282828',
+        foreground: '#ebdbb2',
+        cursor: '#ebdbb2',
+        cursorAccent: '#282828',
+        selectionBackground: 'rgba(80, 73, 69, 0.7)',
+        black: '#282828',
+        red: '#cc241d',
+        green: '#98971a',
+        yellow: '#d79921',
+        blue: '#458588',
+        magenta: '#b16286',
+        cyan: '#689d6a',
+        white: '#a89984',
+        brightBlack: '#928374',
+        brightRed: '#fb4934',
+        brightGreen: '#b8bb26',
+        brightYellow: '#fabd2f',
+        brightBlue: '#83a598',
+        brightMagenta: '#d3869b',
+        brightCyan: '#8ec07c',
+        brightWhite: '#ebdbb2',
+      };
+      const nightOwlTermTheme = {
+        background: '#011627',
+        foreground: '#d6deeb',
+        cursor: '#80a4c2',
+        cursorAccent: '#011627',
+        selectionBackground: 'rgba(29, 59, 83, 0.7)',
+        black: '#010e1a',
+        red: '#ef5350',
+        green: '#22da6e',
+        yellow: '#addb67',
+        blue: '#82aaff',
+        magenta: '#c792ea',
+        cyan: '#21c7a8',
+        white: '#d6deeb',
+        brightBlack: '#575656',
+        brightRed: '#ef5350',
+        brightGreen: '#22da6e',
+        brightYellow: '#ffeb95',
+        brightBlue: '#82aaff',
+        brightMagenta: '#c792ea',
+        brightCyan: '#7fdbca',
+        brightWhite: '#ffffff',
+      };
+      const TERM_THEMES = {
+        dark: darkTermTheme,
+        light: lightTermTheme,
+        monokai: monokaiTermTheme,
+        'solarized-dark': solarizedDarkTermTheme,
+        'solarized-light': solarizedLightTermTheme,
+        nord: nordTermTheme,
+        dracula: draculaTermTheme,
+        'github-dark': githubDarkTermTheme,
+        'one-dark': oneDarkTermTheme,
+        catppuccin: catppuccinTermTheme,
+        gruvbox: gruvboxTermTheme,
+        'night-owl': nightOwlTermTheme,
+      };
 
       // ===== Theme =====
+      const THEMES = [
+        { id: 'dark', name: 'Dark', bg: '#1e1e1e' },
+        { id: 'light', name: 'Light', bg: '#f3f3f3' },
+        { id: 'monokai', name: 'Monokai', bg: '#272822' },
+        { id: 'solarized-dark', name: 'Solarized Dark', bg: '#002b36' },
+        { id: 'solarized-light', name: 'Solarized Light', bg: '#fdf6e3' },
+        { id: 'nord', name: 'Nord', bg: '#2e3440' },
+        { id: 'dracula', name: 'Dracula', bg: '#282a36' },
+        { id: 'github-dark', name: 'GitHub Dark', bg: '#0d1117' },
+        { id: 'one-dark', name: 'One Dark', bg: '#282c34' },
+        { id: 'catppuccin', name: 'Catppuccin', bg: '#1e1e2e' },
+        { id: 'gruvbox', name: 'Gruvbox', bg: '#282828' },
+        { id: 'night-owl', name: 'Night Owl', bg: '#011627' },
+      ];
       function getTheme() {
         return localStorage.getItem('termbeam-theme') || 'dark';
       }
       function applyTheme(theme) {
         document.documentElement.setAttribute('data-theme', theme);
-        document.querySelector('meta[name="theme-color"]').content =
-          theme === 'light' ? '#f3f3f3' : '#1e1e1e';
-        const btn = document.getElementById('theme-toggle');
-        if (btn)
-          btn.innerHTML =
-            theme === 'light'
-              ? '<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 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>'
-              : '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>';
+        const t = THEMES.find((x) => x.id === theme) || THEMES[0];
+        document.querySelector('meta[name="theme-color"]').content = t.bg;
         localStorage.setItem('termbeam-theme', theme);
+        document.querySelectorAll('.theme-option').forEach((el) => {
+          el.classList.toggle('active', el.dataset.themeOption === theme);
+        });
+        const termTheme = TERM_THEMES[theme] || darkTermTheme;
         for (const [, ms] of managed) {
-          ms.term.options.theme = theme === 'light' ? lightTermTheme : darkTermTheme;
+          ms.term.options.theme = termTheme;
         }
       }
       applyTheme(getTheme());
-      document.getElementById('theme-toggle').addEventListener('click', () => {
-        applyTheme(getTheme() === 'light' ? 'dark' : 'light');
+      document.getElementById('theme-toggle').addEventListener('click', (e) => {
+        e.stopPropagation();
+        document.getElementById('theme-picker').classList.toggle('open');
+      });
+      document.addEventListener('click', () => {
+        document.getElementById('theme-picker').classList.remove('open');
+      });
+      document.querySelectorAll('.theme-option').forEach((el) => {
+        el.addEventListener('click', (e) => {
+          e.stopPropagation();
+          applyTheme(el.dataset.themeOption);
+          document.getElementById('theme-picker').classList.remove('open');
+        });
       });
 
       // ===== Font Loading (non-blocking) =====
@@ -2049,8 +2650,18 @@
 
       // ===== Zoom =====
       const MIN_FONT = 2,
-        MAX_FONT = 28;
-      let fontSize = parseInt(localStorage.getItem('termbeam-fontsize') || '8', 10);
+        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));
@@ -2126,6 +2737,62 @@
           .getElementById('zoom-out')
           .addEventListener('click', () => applyZoom(fontSize - 2));
 
+        // 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) {
@@ -2203,6 +2870,7 @@
         // Scroll to bottom when returning from idle / tab switch
         document.addEventListener('visibilitychange', () => {
           if (!document.hidden && activeId) {
+            clearUnreadIndicator();
             const ms = managed.get(activeId);
             if (ms) {
               ms.term.scrollToBottom();
@@ -2265,7 +2933,7 @@
           fontWeightBold: 'bold',
           letterSpacing: 0,
           lineHeight: 1.1,
-          theme: getTheme() === 'light' ? lightTermTheme : darkTermTheme,
+          theme: TERM_THEMES[getTheme()] || darkTermTheme,
           allowProposedApi: true,
           scrollback: 10000,
           scrollOnOutput: false,
@@ -2462,6 +3130,53 @@
         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);
@@ -2496,6 +3211,12 @@
             if (msg.type === 'output') {
               ms.coalescedWrite(msg.data);
               ms.lastActivity = Date.now();
+              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);
@@ -2557,6 +3278,8 @@
       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
@@ -2671,6 +3394,7 @@
               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>' +
@@ -2760,6 +3484,14 @@
             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;
@@ -2822,6 +3554,7 @@
               '<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>' +