termbeam 1.5.0 → 1.8.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')
@@ -1730,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;
@@ -2452,6 +2243,11 @@
     <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 = [
@@ -2513,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');
@@ -2521,433 +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);
-        });
-      });
-
-      // ===== 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) =====
       const nerdFont = new FontFace(
         'NerdFont',
@@ -2966,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;')
@@ -3436,6 +2808,7 @@
           shell: data.shell,
           cwd: data.cwd,
           pid: data.pid,
+          git: data.git || null,
           term,
           fitAddon,
           searchAddon,
@@ -3916,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>'
             );
@@ -4103,183 +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 === 'tab'
-                ? '\x09'
-                : 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');
@@ -4747,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;
               }
             }
 
@@ -5030,22 +4248,7 @@
             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);
-              }
-            },
+            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>',
@@ -5225,9 +4428,7 @@
       })();
 
       // ===== Service Worker =====
-      if ('serviceWorker' in navigator) {
-        navigator.serviceWorker.register('/sw.js').catch(() => {});
-      }
+      registerServiceWorker();
     </script>
   </body>
 </html>