termbeam 1.3.0 → 1.5.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: 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;
@@ -389,7 +662,7 @@
         height: 30px;
         border-radius: 8px;
         cursor: pointer;
-        display: flex;
+        display: none;
         align-items: center;
         justify-content: center;
         gap: 4px;
@@ -412,6 +685,75 @@
         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;
@@ -467,6 +809,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 +847,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 +859,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 +871,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 +886,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 +924,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;
@@ -1372,17 +1737,12 @@
         #tab-list {
           display: none;
         }
-        #split-toggle {
-          display: none;
-        }
-        #version-text {
-          display: none;
-        }
+
         #back-btn {
           display: none;
         }
-        #theme-toggle {
-          display: flex;
+        #theme-wrap {
+          display: none;
         }
         #stop-btn {
           padding: 0 8px;
@@ -1399,6 +1759,195 @@
           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>
@@ -1496,7 +2045,6 @@
       </div>
       <div id="tab-list"></div>
       <div class="right">
-        <span id="version-text" style="font-size: 11px; color: var(--text-muted)"></span>
         <button class="tab-bar-btn" id="tab-new-btn" title="New session">
           <svg
             width="14"
@@ -1511,34 +2059,67 @@
             <line x1="5" y1="12" x2="19" y2="12" /></svg
           ><span class="new-btn-label">New</span>
         </button>
-        <button class="tab-bar-btn" id="split-toggle" title="Split view">
-          <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>
-        </button>
-        <div class="bar-group">
-          <button class="bar-btn" id="zoom-out" title="Decrease font size">−</button>
-          <button class="bar-btn" id="zoom-in" title="Increase font size">+</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="preview-btn"
-          title="Preview local port"
-          onclick="openPreviewModal()"
-        >
-          🌐
-        </button>
-        <button class="bar-btn" id="share-btn" title="Share link">
+        <button class="bar-btn" id="palette-trigger" title="Tools (Ctrl+K)">
           <svg
             width="16"
             height="16"
@@ -1549,49 +2130,10 @@
             stroke-linecap="round"
             stroke-linejoin="round"
           >
-            <circle cx="18" cy="5" r="3" />
-            <circle cx="6" cy="12" r="3" />
-            <circle cx="18" cy="19" r="3" />
-            <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
-            <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
-          </svg>
-        </button>
-        <button class="bar-btn" id="refresh-btn" title="Refresh app">
-          <svg
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <polyline points="23 4 23 10 17 10" />
-            <polyline points="1 20 1 14 7 14" />
-            <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
-          </svg>
-        </button>
-        <button class="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" />
+            <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">
@@ -1612,7 +2154,16 @@
     </div>
 
     <!-- Terminals Wrapper (panes created dynamically) -->
-    <div id="terminals-wrapper"></div>
+    <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>
 
@@ -1631,7 +2182,7 @@
       <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="&#x09;" title="Autocomplete">Tab</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>
@@ -1878,9 +2429,29 @@
       </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>
       // ===== Constants =====
       const SESSION_COLORS = [
@@ -1901,6 +2472,33 @@
 
       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');
@@ -1970,29 +2568,384 @@
         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);
+        });
+      });
+
+      // ===== Terminal Search =====
+      const searchBar = document.getElementById('search-bar');
+      const searchInput = document.getElementById('search-input');
+      const searchCount = document.getElementById('search-count');
+      const searchRegexBtn = document.getElementById('search-regex');
+      let searchRegex = false;
+      let searchResultIndex = 0;
+      let searchResultTotal = 0;
+
+      function getActiveSearchAddon() {
+        if (!activeId) return null;
+        const ms = managed.get(activeId);
+        return ms ? ms.searchAddon : null;
+      }
+
+      function updateSearchCount(idx, total) {
+        searchResultIndex = idx;
+        searchResultTotal = total;
+        searchCount.textContent = total > 0 ? idx + 1 + ' of ' + total : 'No results';
+      }
+
+      function doSearch(direction) {
+        const addon = getActiveSearchAddon();
+        if (!addon) return;
+        const query = searchInput.value;
+        if (!query) {
+          searchCount.textContent = '';
+          return;
+        }
+        const opts = {
+          regex: searchRegex,
+          caseSensitive: false,
+          incremental: direction === 'next',
+        };
+        let result;
+        if (direction === 'prev') {
+          result = addon.findPrevious(query, opts);
+        } else {
+          result = addon.findNext(query, opts);
+        }
+        // SearchAddon returns boolean; no match count API in v0.15
+        searchCount.textContent = result ? 'Found' : 'No results';
+      }
+
+      function openSearchBar() {
+        searchBar.classList.add('visible');
+        searchInput.focus();
+        searchInput.select();
+      }
+
+      function closeSearchBar() {
+        searchBar.classList.remove('visible');
+        searchCount.textContent = '';
+        searchInput.value = '';
+        const addon = getActiveSearchAddon();
+        if (addon) addon.clearDecorations();
+        // Re-focus terminal
+        if (activeId) {
+          const ms = managed.get(activeId);
+          if (ms) ms.term.focus();
+        }
+      }
+
+      searchInput.addEventListener('input', () => doSearch('next'));
+      searchInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') {
+          closeSearchBar();
+          e.preventDefault();
+        } else if (e.key === 'Enter') {
+          e.preventDefault();
+          doSearch(e.shiftKey ? 'prev' : 'next');
+        }
+      });
+      document.getElementById('search-next').addEventListener('click', () => doSearch('next'));
+      document.getElementById('search-prev').addEventListener('click', () => doSearch('prev'));
+      document.getElementById('search-close').addEventListener('click', closeSearchBar);
+      document.getElementById('search-regex').addEventListener('click', () => {
+        searchRegex = !searchRegex;
+        searchRegexBtn.classList.toggle('active', searchRegex);
+        if (searchInput.value) doSearch('next');
+      });
+
+      document.addEventListener('keydown', (e) => {
+        if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
+          e.preventDefault();
+          openSearchBar();
+        }
       });
 
       // ===== Font Loading (non-blocking) =====
@@ -2049,7 +3002,7 @@
 
       // ===== Zoom =====
       const MIN_FONT = 2,
-        MAX_FONT = 28;
+        MAX_FONT = 32;
       function defaultFontSize() {
         const w = window.innerWidth;
         if (w <= 480) return 12;
@@ -2130,11 +3083,61 @@
         loadShellsForModal();
         startPolling();
 
-        // Zoom
-        document.getElementById('zoom-in').addEventListener('click', () => applyZoom(fontSize + 2));
-        document
-          .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() {
@@ -2207,12 +3210,10 @@
           );
         }
 
-        // Split toggle
-        document.getElementById('split-toggle').addEventListener('click', toggleSplit);
-
         // 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();
@@ -2256,7 +3257,7 @@
         fetch('/api/version')
           .then((r) => r.json())
           .then((d) => {
-            document.getElementById('version-text').textContent = 'v' + d.version;
+            window._termbeamVersion = 'v' + d.version;
             document.getElementById('side-panel-version').textContent = 'v' + d.version;
           })
           .catch(() => {});
@@ -2265,6 +3266,7 @@
       // ===== 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,
@@ -2275,7 +3277,7 @@
           fontWeightBold: 'bold',
           letterSpacing: 0,
           lineHeight: 1.1,
-          theme: getTheme() === 'light' ? lightTermTheme : darkTermTheme,
+          theme: TERM_THEMES[getTheme()] || darkTermTheme,
           allowProposedApi: true,
           scrollback: 10000,
           scrollOnOutput: false,
@@ -2283,8 +3285,10 @@
 
         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';
@@ -2434,6 +3438,7 @@
           pid: data.pid,
           term,
           fitAddon,
+          searchAddon,
           container,
           coalescedWrite,
           scrollBtn,
@@ -2442,6 +3447,7 @@
           reconnectTimer: null,
           reconnectDelay: 3000,
           lastActivity: data.lastActivity || Date.now(),
+          silenceTimer: null,
         };
 
         managed.set(data.id, ms);
@@ -2472,6 +3478,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);
@@ -2506,6 +3559,13 @@
             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);
@@ -2567,6 +3627,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
@@ -2618,6 +3680,10 @@
             clearTimeout(ms.reconnectTimer);
             ms.reconnectTimer = null;
           }
+          if (ms.silenceTimer) {
+            clearTimeout(ms.silenceTimer);
+            ms.silenceTimer = null;
+          }
           if (ms.ws)
             try {
               ms.ws.close();
@@ -2681,6 +3747,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>' +
@@ -2770,6 +3837,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;
@@ -2832,6 +3907,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>' +
@@ -2994,7 +4070,6 @@
       // ===== Split View =====
       function toggleSplit() {
         splitMode = !splitMode;
-        document.getElementById('split-toggle').classList.toggle('active', splitMode);
 
         if (splitMode) {
           // Find a second session to show
@@ -3081,7 +4156,12 @@
         function sendKey(btn) {
           if (!btn || !btn.dataset.key) return;
           flashBtn(btn);
-          let data = btn.dataset.key === 'enter' ? '\r' : btn.dataset.key;
+          let data =
+            btn.dataset.key === 'enter'
+              ? '\r'
+              : btn.dataset.key === 'tab'
+                ? '\x09'
+                : btn.dataset.key;
           data = applyModifiers(data);
           const ms = managed.get(activeId);
           if (ms && ms.ws && ms.ws.readyState === 1) {
@@ -3614,6 +4694,18 @@
         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',
@@ -3668,6 +4760,10 @@
                   clearTimeout(ms.reconnectTimer);
                   ms.reconnectTimer = null;
                 }
+                if (ms.silenceTimer) {
+                  clearTimeout(ms.silenceTimer);
+                  ms.silenceTimer = null;
+                }
                 if (ms.ws)
                   try {
                     ms.ws.close();
@@ -3801,12 +4897,11 @@
         });
       }
 
-      document.getElementById('share-btn').addEventListener('click', async () => {
+      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);
-        // ClipboardItem with a promise preserves user activation across the fetch
         if (navigator.clipboard && typeof ClipboardItem !== 'undefined') {
           try {
             const blobPromise = urlPromise.then((u) => new Blob([u], { type: 'text/plain' }));
@@ -3815,7 +4910,6 @@
             return;
           } catch {}
         }
-        // Fallback: resolve URL first, then try legacy methods
         const url = await urlPromise;
         if (navigator.clipboard && navigator.clipboard.writeText) {
           try {
@@ -3829,10 +4923,9 @@
         } else {
           showShareUrlPrompt(url);
         }
-      });
+      }
 
-      // ===== Refresh Button =====
-      document.getElementById('refresh-btn').addEventListener('click', async () => {
+      async function refreshApp() {
         if ('caches' in window) {
           const keys = await caches.keys();
           await Promise.all(keys.map((k) => caches.delete(k)));
@@ -3842,7 +4935,294 @@
           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"><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: () => {
+              const url = location.href;
+              if (navigator.clipboard && navigator.clipboard.writeText) {
+                navigator.clipboard.writeText(url).then(
+                  () => showToast('Link copied!'),
+                  () => {
+                    if (copyToClipboardFallback(url)) showToast('Link copied!');
+                    else showShareUrlPrompt(url);
+                  },
+                );
+              } else if (copyToClipboardFallback(url)) {
+                showToast('Link copied!');
+              } else {
+                showShareUrlPrompt(url);
+              }
+            },
+          },
+          {
+            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:16px;">' +
+                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>';
+              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', () => {
+                if (!a.keepOpen) closePalette();
+                a.action();
+              });
+              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 =====
       if ('serviceWorker' in navigator) {