termbeam 1.4.0 → 1.7.0

package/public/terminal.html

@@ -15,6 +15,7 @@
     />
     <link rel="manifest" href="/manifest.json" />
     <link rel="apple-touch-icon" href="/icons/icon-192.png" />
+    <link rel="stylesheet" href="/css/themes.css" />
     <title>TermBeam — Terminal</title>
     <link
       rel="stylesheet"
@@ -22,257 +23,23 @@
     />
     <style>
       :root {
-        --bg: #1e1e1e;
-        --surface: #252526;
-        --border: #3c3c3c;
-        --border-subtle: #474747;
-        --text: #d4d4d4;
-        --text-secondary: #858585;
-        --text-dim: #6e6e6e;
-        --text-muted: #555555;
-        --accent: #0078d4;
-        --accent-hover: #1a8ae8;
-        --accent-active: #005a9e;
-        --danger: #f14c4c;
-        --danger-hover: #d73a3a;
-        --success: #89d185;
         --key-bg: #4a4a4c;
         --key-border: #5a5a5c;
         --key-shadow: rgba(0, 0, 0, 0.5);
         --key-special-bg: #333335;
         --overlay-bg: rgba(0, 0, 0, 0.85);
       }
-      [data-theme='light'] {
-        --bg: #ffffff;
-        --surface: #f3f3f3;
-        --border: #e0e0e0;
-        --border-subtle: #d0d0d0;
-        --text: #1e1e1e;
-        --text-secondary: #616161;
-        --text-dim: #767676;
-        --text-muted: #a0a0a0;
-        --accent: #0078d4;
-        --accent-hover: #106ebe;
-        --accent-active: #005a9e;
-        --danger: #e51400;
-        --danger-hover: #c20000;
-        --success: #16825d;
-        --key-bg: #ffffff;
-        --key-border: #b5b5b5;
-        --key-shadow: rgba(0, 0, 0, 0.12);
-        --key-special-bg: #adb5bd;
-        --overlay-bg: rgba(0, 0, 0, 0.5);
-      }
-      [data-theme='monokai'] {
-        --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);
-      }
+      [data-theme='light'] { --key-bg: #ffffff; --key-border: #b5b5b5; --key-shadow: rgba(0, 0, 0, 0.12); --key-special-bg: #adb5bd; --overlay-bg: rgba(0, 0, 0, 0.5); }
+      [data-theme='monokai'] { --key-bg: #49483e; --key-border: #5c5c4f; --key-shadow: rgba(0, 0, 0, 0.4); --key-special-bg: #3e3d32; }
+      [data-theme='solarized-dark'] { --key-bg: #073642; --key-border: #586e75; --key-shadow: rgba(0, 0, 0, 0.3); --key-special-bg: #002b36; }
+      [data-theme='solarized-light'] { --key-bg: #ffffff; --key-border: #b5b5b5; --key-shadow: rgba(0, 0, 0, 0.12); --key-special-bg: #adb5bd; }
+      [data-theme='nord'] { --key-bg: #434c5e; --key-border: #4c566a; --key-shadow: rgba(0, 0, 0, 0.3); --key-special-bg: #3b4252; }
+      [data-theme='dracula'] { --key-bg: #44475a; --key-border: #525568; --key-shadow: rgba(0, 0, 0, 0.4); --key-special-bg: #343746; }
+      [data-theme='github-dark'] { --key-bg: #161b22; --key-border: #30363d; --key-shadow: rgba(0, 0, 0, 0.4); --key-special-bg: #0d1117; }
+      [data-theme='one-dark'] { --key-bg: #3e4452; --key-border: #4b5263; --key-shadow: rgba(0, 0, 0, 0.3); --key-special-bg: #21252b; }
+      [data-theme='catppuccin'] { --key-bg: #45475a; --key-border: #585b70; --key-shadow: rgba(0, 0, 0, 0.3); --key-special-bg: #313244; }
+      [data-theme='gruvbox'] { --key-bg: #504945; --key-border: #665c54; --key-shadow: rgba(0, 0, 0, 0.4); --key-special-bg: #3c3836; }
+      [data-theme='night-owl'] { --key-bg: #1d3b53; --key-border: #264863; --key-shadow: rgba(0, 0, 0, 0.4); --key-special-bg: #0d2a45; }
       @font-face {
         font-family: 'NerdFont';
         src: url('https://cdn.jsdelivr.net/gh/ryanoasis/nerd-fonts@latest/patched-fonts/JetBrainsMono/Ligatures/Regular/JetBrainsMonoNerdFont-Regular.ttf')
@@ -611,7 +378,7 @@
       }
       .theme-wrap {
         position: relative;
-        display: flex;
+        display: none;
         align-items: center;
       }
       .theme-picker {
@@ -662,7 +429,7 @@
         height: 30px;
         border-radius: 8px;
         cursor: pointer;
-        display: flex;
+        display: none;
         align-items: center;
         justify-content: center;
         gap: 4px;
@@ -685,6 +452,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;
@@ -1661,6 +1497,30 @@
         white-space: normal;
       }
 
+      .side-panel-card-git {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 3px 6px;
+        padding: 0 12px 4px;
+        font-size: 10px;
+        color: var(--text-secondary);
+        align-items: center;
+      }
+      .side-panel-card-git .git-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 3px;
+        background: var(--surface);
+        padding: 1px 6px;
+        border-radius: 3px;
+      }
+      .side-panel-card-git .git-status-clean {
+        color: var(--success);
+      }
+      .side-panel-card-git .git-status-dirty {
+        color: var(--warning, #fbbf24);
+      }
+
       @media (max-width: 640px) {
         #panel-toggle {
           display: flex;
@@ -1668,17 +1528,12 @@
         #tab-list {
           display: none;
         }
-        #split-toggle {
-          display: none;
-        }
-        #version-text {
-          display: none;
-        }
+
         #back-btn {
           display: none;
         }
         #theme-wrap {
-          display: flex;
+          display: none;
         }
         #stop-btn {
           padding: 0 8px;
@@ -1695,6 +1550,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>
@@ -1792,7 +1836,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"
@@ -1807,67 +1850,6 @@
             <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>
-        <button
-          class="bar-btn"
-          id="preview-btn"
-          title="Preview local port"
-          onclick="openPreviewModal()"
-        >
-          🌐
-        </button>
-        <button class="bar-btn" id="share-btn" title="Share link">
-          <svg
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <circle cx="18" cy="5" r="3" />
-            <circle cx="6" cy="12" r="3" />
-            <circle cx="18" cy="19" r="3" />
-            <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
-            <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
-          </svg>
-        </button>
-        <button class="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>
         <div class="theme-wrap" id="theme-wrap">
           <button class="bar-btn" id="theme-toggle" title="Switch theme">
             <svg
@@ -1928,6 +1910,23 @@
             </div>
           </div>
         </div>
+        <button class="bar-btn" id="palette-trigger" title="Tools (Ctrl+K)">
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <rect x="3" y="3" width="7" height="7" rx="1" />
+            <rect x="14" y="3" width="7" height="7" rx="1" />
+            <rect x="3" y="14" width="7" height="7" rx="1" />
+            <rect x="14" y="14" width="7" height="7" rx="1" />
+          </svg>
+        </button>
         <button id="stop-btn" title="Stop session">
           <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none">
             <rect x="6" y="6" width="12" height="12" rx="2" /></svg
@@ -1946,7 +1945,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>
 
@@ -1965,7 +1973,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>
@@ -2212,9 +2220,34 @@
       </div>
     </div>
 
+    <!-- Command Palette / Tool Panel -->
+    <div id="palette-backdrop" class="palette-backdrop"></div>
+    <div id="palette-panel" class="palette-panel">
+      <div class="palette-header">
+        <span>Tools</span>
+        <button class="palette-close" id="palette-close">✕</button>
+      </div>
+      <div class="palette-body" id="palette-body"></div>
+    </div>
+
+    <!-- Theme Sub-Panel -->
+    <div class="theme-subpanel" id="theme-subpanel">
+      <div class="theme-subpanel-header">
+        <span>Theme</span>
+        <button class="theme-subpanel-close" id="theme-subpanel-close">✕</button>
+      </div>
+      <div class="theme-subpanel-list" id="theme-subpanel-list"></div>
+    </div>
+
     <script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-web-links@0.11.0/lib/addon-web-links.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-search@0.15.0/lib/addon-search.min.js"></script>
+    <script src="/js/shared.js"></script>
+    <script src="/js/themes.js"></script>
+    <script src="/js/terminal-themes.js"></script>
+    <script src="/js/keybar.js"></script>
+    <script src="/js/search.js"></script>
     <script>
       // ===== Constants =====
       const SESSION_COLORS = [
@@ -2235,6 +2268,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');
@@ -2249,6 +2309,14 @@
         document.body.removeChild(ta);
       }
 
+      // Hook into shared theme system to update xterm terminal themes
+      window.onThemeApplied = function (theme) {
+        const termTheme = TERM_THEMES[theme] || darkTermTheme;
+        for (const [, ms] of managed) {
+          ms.term.options.theme = termTheme;
+        }
+      };
+
       // ===== DOM Refs =====
       const statusDot = document.getElementById('status-dot');
       const statusText = document.getElementById('status-text');
@@ -2257,345 +2325,6 @@
       const tabListEl = document.getElementById('tab-list');
       const terminalsWrapper = document.getElementById('terminals-wrapper');
 
-      // ===== Terminal Themes =====
-      const darkTermTheme = {
-        background: '#1e1e1e',
-        foreground: '#d4d4d4',
-        cursor: '#aeafad',
-        cursorAccent: '#1e1e1e',
-        selectionBackground: 'rgba(38, 79, 120, 0.5)',
-        black: '#000000',
-        red: '#cd3131',
-        green: '#0dbc79',
-        yellow: '#e5e510',
-        blue: '#2472c8',
-        magenta: '#bc3fbc',
-        cyan: '#11a8cd',
-        white: '#e5e5e5',
-        brightBlack: '#666666',
-        brightRed: '#f14c4c',
-        brightGreen: '#23d18b',
-        brightYellow: '#f5f543',
-        brightBlue: '#3b8eea',
-        brightMagenta: '#d670d6',
-        brightCyan: '#29b8db',
-        brightWhite: '#e5e5e5',
-      };
-      const lightTermTheme = {
-        background: '#ffffff',
-        foreground: '#1e1e1e',
-        cursor: '#000000',
-        cursorAccent: '#ffffff',
-        selectionBackground: 'rgba(0, 120, 215, 0.3)',
-        black: '#000000',
-        red: '#cd3131',
-        green: '#00bc7c',
-        yellow: '#949800',
-        blue: '#0451a5',
-        magenta: '#bc05bc',
-        cyan: '#0598bc',
-        white: '#555555',
-        brightBlack: '#666666',
-        brightRed: '#cd3131',
-        brightGreen: '#14ce14',
-        brightYellow: '#b5ba00',
-        brightBlue: '#0451a5',
-        brightMagenta: '#bc05bc',
-        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);
-        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 = termTheme;
-        }
-      }
-      applyTheme(getTheme());
-      document.getElementById('theme-toggle').addEventListener('click', (e) => {
-        e.stopPropagation();
-        document.getElementById('theme-picker').classList.toggle('open');
-      });
-      document.addEventListener('click', () => {
-        document.getElementById('theme-picker').classList.remove('open');
-      });
-      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) =====
       const nerdFont = new FontFace(
         'NerdFont',
@@ -2614,11 +2343,6 @@
       init();
 
       // ===== Helpers =====
-      function esc(str) {
-        const d = document.createElement('div');
-        d.textContent = str;
-        return d.innerHTML;
-      }
       function escAttr(str) {
         return String(str)
           .replace(/&/g, '&amp;')
@@ -2731,12 +2455,6 @@
         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');
@@ -2864,9 +2582,6 @@
           );
         }
 
-        // 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) {
@@ -2914,7 +2629,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(() => {});
@@ -2923,6 +2638,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,
@@ -2941,8 +2657,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';
@@ -3090,8 +2808,10 @@
           shell: data.shell,
           cwd: data.cwd,
           pid: data.pid,
+          git: data.git || null,
           term,
           fitAddon,
+          searchAddon,
           container,
           coalescedWrite,
           scrollBtn,
@@ -3100,6 +2820,7 @@
           reconnectTimer: null,
           reconnectDelay: 3000,
           lastActivity: data.lastActivity || Date.now(),
+          silenceTimer: null,
         };
 
         managed.set(data.id, ms);
@@ -3211,6 +2932,7 @@
             if (msg.type === 'output') {
               ms.coalescedWrite(msg.data);
               ms.lastActivity = Date.now();
+              resetSilenceTimer(ms);
               markUnreadOutput();
               if (ms.id !== activeId && !ms.hasUnread) {
                 ms.hasUnread = true;
@@ -3331,6 +3053,10 @@
             clearTimeout(ms.reconnectTimer);
             ms.reconnectTimer = null;
           }
+          if (ms.silenceTimer) {
+            clearTimeout(ms.silenceTimer);
+            ms.silenceTimer = null;
+          }
           if (ms.ws)
             try {
               ms.ws.close();
@@ -3563,6 +3289,26 @@
               '" title="Close session">×</button>' +
               '</div>' +
               (activity ? '<div class="side-panel-card-meta">' + activity + ' ago</div>' : '') +
+              (ms.git
+                ? '<div class="side-panel-card-git">' +
+                  '<span class="git-badge"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg> ' +
+                  esc(ms.git.branch || 'detached') +
+                  '</span>' +
+                  (ms.git.provider
+                    ? '<span class="git-badge">' + esc(ms.git.provider) + '</span>'
+                    : '') +
+                  (ms.git.repoName
+                    ? '<span class="git-badge">' + esc(ms.git.repoName) + '</span>'
+                    : '') +
+                  (ms.git.status
+                    ? '<span class="git-badge ' +
+                      (ms.git.status.clean ? 'git-status-clean' : 'git-status-dirty') +
+                      '">' +
+                      (ms.git.status.clean ? '✓ clean' : esc(ms.git.status.summary)) +
+                      '</span>'
+                    : '') +
+                  '</div>'
+                : '') +
               previewContent +
               '</div>'
             );
@@ -3717,7 +3463,6 @@
       // ===== Split View =====
       function toggleSplit() {
         splitMode = !splitMode;
-        document.getElementById('split-toggle').classList.toggle('active', splitMode);
 
         if (splitMode) {
           // Find a second session to show
@@ -3751,178 +3496,6 @@
         renderTabs();
       }
 
-      // ===== Key Bar =====
-      // Modifier state (shared with terminal onData)
-      let ctrlActive = false;
-      let shiftActive = false;
-      function clearModifiers() {
-        ctrlActive = false;
-        shiftActive = false;
-        const ctrlBtn = document.getElementById('ctrl-btn');
-        const shiftBtn = document.getElementById('shift-btn');
-        if (ctrlBtn) ctrlBtn.classList.remove('active');
-        if (shiftBtn) shiftBtn.classList.remove('active');
-      }
-
-      function setupKeyBar() {
-        const keyBar = document.getElementById('key-bar');
-        const ctrlBtn = document.getElementById('ctrl-btn');
-        const shiftBtn = document.getElementById('shift-btn');
-        let repeatTimer = null;
-        let repeatInterval = null;
-
-        function toggleModifier(which) {
-          if (which === 'ctrl') {
-            ctrlActive = !ctrlActive;
-            ctrlBtn.classList.toggle('active', ctrlActive);
-          } else {
-            shiftActive = !shiftActive;
-            shiftBtn.classList.toggle('active', shiftActive);
-          }
-        }
-
-        function applyModifiers(key) {
-          if (!ctrlActive && !shiftActive) return key;
-          // Modifier param: Shift=2, Ctrl=5, Ctrl+Shift=6
-          const mod = ctrlActive && shiftActive ? 6 : ctrlActive ? 5 : 2;
-          // Arrow keys: \x1b[X → \x1b[1;{mod}X
-          const csiMatch = key.match(/^\x1b\[([ABCD])$/);
-          if (csiMatch) return '\x1b[1;' + mod + csiMatch[1];
-          // Home/End: \x1bOH/\x1bOF → \x1b[1;{mod}H/F
-          const ssMatch = key.match(/^\x1bO([HF])$/);
-          if (ssMatch) return '\x1b[1;' + mod + ssMatch[1];
-          // Tab with Shift → reverse tab
-          if (key === '\x09' && shiftActive && !ctrlActive) return '\x1b[Z';
-          return key;
-        }
-
-        function flashBtn(btn) {
-          btn.classList.add('flash');
-          setTimeout(() => btn.classList.remove('flash'), 120);
-        }
-
-        function sendKey(btn) {
-          if (!btn || !btn.dataset.key) return;
-          flashBtn(btn);
-          let data = btn.dataset.key === 'enter' ? '\r' : btn.dataset.key;
-          data = applyModifiers(data);
-          const ms = managed.get(activeId);
-          if (ms && ms.ws && ms.ws.readyState === 1) {
-            ms.ws.send(JSON.stringify({ type: 'input', data }));
-          }
-          clearModifiers();
-        }
-
-        function stopRepeat() {
-          clearTimeout(repeatTimer);
-          clearInterval(repeatInterval);
-          repeatTimer = null;
-          repeatInterval = null;
-        }
-
-        function startRepeat(btn) {
-          stopRepeat();
-          sendKey(btn);
-          repeatTimer = setTimeout(() => {
-            repeatInterval = setInterval(() => sendKey(btn), 80);
-          }, 400);
-        }
-
-        ctrlBtn.addEventListener('click', (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          toggleModifier('ctrl');
-        });
-        shiftBtn.addEventListener('click', (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          toggleModifier('shift');
-        });
-        ctrlBtn.addEventListener('mousedown', (e) => e.preventDefault());
-        shiftBtn.addEventListener('mousedown', (e) => e.preventDefault());
-        ctrlBtn.addEventListener(
-          'touchstart',
-          (e) => {
-            e.preventDefault();
-            keyBarTouched = true;
-            toggleModifier('ctrl');
-          },
-          { passive: false },
-        );
-        shiftBtn.addEventListener(
-          'touchstart',
-          (e) => {
-            e.preventDefault();
-            keyBarTouched = true;
-            toggleModifier('shift');
-          },
-          { passive: false },
-        );
-
-        let keyBarTouched = false;
-        keyBar.addEventListener('mousedown', (e) => {
-          if (keyBarTouched) {
-            keyBarTouched = false;
-            return;
-          }
-          const btn = e.target.closest('.key-btn');
-          if (btn && btn.dataset.key) {
-            e.preventDefault();
-            startRepeat(btn);
-          }
-        });
-        keyBar.addEventListener('mouseup', stopRepeat);
-        keyBar.addEventListener('mouseleave', stopRepeat);
-
-        // Touch handling: allow native scroll when swiping, fire key only on tap
-        const SWIPE_THRESHOLD = 10;
-        let touchStartX = 0;
-        let touchBtn = null;
-        let touchMoved = false;
-
-        keyBar.addEventListener(
-          'touchstart',
-          (e) => {
-            keyBarTouched = true;
-            touchBtn = e.target.closest('.key-btn');
-            touchMoved = false;
-            touchStartX = e.touches[0].clientX;
-            // Don't preventDefault — let the browser handle scroll
-          },
-          { passive: true },
-        );
-        keyBar.addEventListener(
-          'touchmove',
-          (e) => {
-            if (Math.abs(e.touches[0].clientX - touchStartX) > SWIPE_THRESHOLD) {
-              touchMoved = true;
-              stopRepeat();
-            }
-          },
-          { passive: true },
-        );
-        keyBar.addEventListener('touchend', (e) => {
-          if (!touchMoved && touchBtn && touchBtn.dataset.key) {
-            e.preventDefault();
-            sendKey(touchBtn);
-          }
-          stopRepeat();
-          touchBtn = null;
-        });
-        keyBar.addEventListener('touchcancel', () => {
-          stopRepeat();
-          touchBtn = null;
-        });
-
-        keyBar.addEventListener('click', (e) => {
-          const btn = e.target.closest('.key-btn');
-          if (btn) {
-            const ms = managed.get(activeId);
-            if (ms) ms.term.focus();
-          }
-        });
-      }
-
       // ===== Paste =====
       function setupPaste() {
         const pasteOverlay = document.getElementById('paste-overlay');
@@ -4337,6 +3910,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',
@@ -4378,7 +3963,9 @@
                 const ms = managed.get(s.id);
                 ms.name = s.name;
                 ms.color = s.color;
+                ms.cwd = s.cwd;
                 ms.lastActivity = s.lastActivity;
+                ms.git = s.git || null;
               }
             }
 
@@ -4391,6 +3978,10 @@
                   clearTimeout(ms.reconnectTimer);
                   ms.reconnectTimer = null;
                 }
+                if (ms.silenceTimer) {
+                  clearTimeout(ms.silenceTimer);
+                  ms.silenceTimer = null;
+                }
                 if (ms.ws)
                   try {
                     ms.ws.close();
@@ -4524,12 +4115,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' }));
@@ -4538,7 +4128,6 @@
             return;
           } catch {}
         }
-        // Fallback: resolve URL first, then try legacy methods
         const url = await urlPromise;
         if (navigator.clipboard && navigator.clipboard.writeText) {
           try {
@@ -4552,10 +4141,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)));
@@ -4565,12 +4153,282 @@
           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: shareLink,
+          },
+          {
+            icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>',
+            get label() {
+              return notificationsEnabled ? 'Notifications (on)' : 'Notifications (off)';
+            },
+            category: 'Notifications',
+            keepOpen: true,
+            action: () => {
+              notificationsEnabled = !notificationsEnabled;
+              localStorage.setItem('termbeam-notifications', notificationsEnabled);
+              if (
+                notificationsEnabled &&
+                'Notification' in window &&
+                Notification.permission === 'default'
+              ) {
+                Notification.requestPermission();
+              }
+              showToast(notificationsEnabled ? 'Notifications on' : 'Notifications off');
+              renderPalette();
+            },
+          },
+          {
+            icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>',
+            label: 'Refresh',
+            category: 'System',
+            action: () => refreshApp(),
+          },
+          {
+            icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 4H8l-7 8 7 8h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"/><line x1="18" y1="9" x2="12" y2="15"/><line x1="12" y1="9" x2="18" y2="15"/></svg>',
+            label: 'Clear terminal',
+            category: 'System',
+            action: () => {
+              if (!activeId) return;
+              const ms = managed.get(activeId);
+              if (ms) ms.term.clear();
+            },
+          },
+          {
+            icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>',
+            label: 'About',
+            category: 'System',
+            action: () => {
+              const ver = window._termbeamVersion || 'TermBeam';
+              const overlay = document.createElement('div');
+              overlay.style.cssText =
+                'position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:300;display:flex;align-items:center;justify-content:center;';
+              const box = document.createElement('div');
+              box.style.cssText =
+                'background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;max-width:90vw;width:320px;text-align:center;';
+              box.innerHTML =
+                '<div style="font-size:24px;margin-bottom:8px;">⚡</div>' +
+                '<div style="font-size:16px;font-weight:600;color:var(--text);margin-bottom:4px;">TermBeam</div>' +
+                '<div style="font-size:13px;color:var(--text-secondary);margin-bottom: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) {
-        navigator.serviceWorker.register('/sw.js').catch(() => {});
-      }
+      registerServiceWorker();
     </script>
   </body>
 </html>