feat: tabbed platform installer on landing page

Add an interactive OS selector widget to the hero section and install
steps, inspired by OpenClaw's install UI:

- macOS-style window chrome with red/yellow/green dots
- Three clickable tabs: Linux/macOS, PowerShell, CMD
- Command text, shell prompt, and note update on tab click
- Auto-detects visitor's OS and selects the right tab on page load
- Install steps section also gets synced platform tabs
- Simplified Windows note section (tabs above now cover all platforms)
- Fully responsive — icons hidden on mobile, tabs wrap properly

landingpage/index.html

@@ -69,14 +69,38 @@
             </p>
 
             <div class="hero-install">
-                <div class="install-box">
+                <div class="install-widget">
-                    <code id="install-command">curl -fsSL https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.sh | bash</code>
+                    <div class="install-widget-header">
-                    <button class="copy-btn" onclick="copyInstall()" title="Copy to clipboard">
+                        <div class="install-dots">
-                        <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>
+                            <span class="dot dot-red"></span>
-                        <span class="copy-text">Copy</span>
+                            <span class="dot dot-yellow"></span>
-                    </button>
+                            <span class="dot dot-green"></span>
+                        </div>
+                        <div class="install-tabs">
+                            <button class="install-tab active" data-platform="linux" onclick="switchPlatform('linux')">
+                                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style="opacity:0.7"><path d="M12.504 0c-.155 0-.315.008-.48.021-4.226.333-3.105 4.807-3.17 6.298-.076 1.092-.3 1.953-1.05 3.02-.885 1.051-2.127 2.75-2.716 4.521-.278.832-.41 1.684-.287 2.489a.424.424 0 00-.11.135c-.26.268-.45.6-.663.839-.199.199-.485.267-.797.4-.313.136-.658.269-.864.68-.09.189-.136.394-.132.602 0 .199.027.4.055.536.058.399.116.728.04.97-.249.68-.28 1.145-.106 1.484.174.334.535.47.94.601.81.2 1.91.135 2.774.6.926.466 1.866.67 2.616.47.526-.116.97-.464 1.208-.946.587-.003 1.23-.269 2.26-.334.699-.058 1.574.267 2.577.2.025.134.063.198.114.333l.003.003c.391.778 1.113 1.368 1.884 1.43.39.03.8-.066 1.109-.199.69-.3 1.286-1.006 1.652-1.963.086-.235.188-.479.152-.88-.064-.406-.358-.597-.548-.899-.19-.301-.2-.335-.2-.68 0-.348.076-.664.152-.901.1-.256.233-.478.21-.783l-.003-.003c-.091-.472-.279-.861-.607-1.144-.327-.283-.762-.409-1.032-.433-.18-.04-.33-.063-.44-.143-.12-.09-.21-.29-.19-.543 .029-.272.089-.549.178-.822.188-.57.456-1.128.748-1.633.02-.044.04-.09.06-.133a.205.205 0 00.015-.04c.413-.916.64-1.866.64-2.699 0-1.039-.258-1.904-.608-2.572-.11-.188-.208-.368-.32-.527a.604.604 0 00-.038-.06c-.725-1.05-1.735-1.572-2.74-1.795a6.986 6.986 0 00-1.18-.133h-.005c-.163 0-.32.01-.478.025z"/></svg>
+                                Linux / macOS
+                            </button>
+                            <button class="install-tab" data-platform="powershell" onclick="switchPlatform('powershell')">
+                                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style="opacity:0.7"><path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801"/></svg>
+                                PowerShell
+                            </button>
+                            <button class="install-tab" data-platform="cmd" onclick="switchPlatform('cmd')">
+                                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style="opacity:0.7"><path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801"/></svg>
+                                CMD
+                            </button>
+                        </div>
+                    </div>
+                    <div class="install-widget-body">
+                        <span class="install-prompt" id="install-prompt">$</span>
+                        <code id="install-command">curl -fsSL https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.sh | bash</code>
+                        <button class="copy-btn" onclick="copyInstall()" title="Copy to clipboard">
+                            <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>
+                            <span class="copy-text">Copy</span>
+                        </button>
+                    </div>
                 </div>
-                <p class="install-note">Works on Linux & macOS · No Python prerequisite · Installs everything automatically</p>
+                <p class="install-note" id="install-note">Works on Linux, macOS & WSL · No prerequisites · Installs everything automatically</p>
             </div>
 
             <div class="hero-links">
@@ -330,12 +354,16 @@
                         <h4>Install</h4>
                         <div class="code-block">
                             <div class="code-header">
-                                <span>bash</span>
+                                <div class="code-tabs">
-                                <button class="copy-btn" onclick="copyText(this)" data-text="curl -fsSL https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.sh | bash">Copy</button>
+                                    <button class="code-tab active" data-platform="linux" onclick="switchStepPlatform('linux')">Linux / macOS</button>
+                                    <button class="code-tab" data-platform="powershell" onclick="switchStepPlatform('powershell')">PowerShell</button>
+                                    <button class="code-tab" data-platform="cmd" onclick="switchStepPlatform('cmd')">CMD</button>
+                                </div>
+                                <button class="copy-btn" id="step1-copy" onclick="copyText(this)" data-text="curl -fsSL https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.sh | bash">Copy</button>
                             </div>
-                            <pre><code>curl -fsSL https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.sh | bash</code></pre>
+                            <pre><code id="step1-command">curl -fsSL https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.sh | bash</code></pre>
                         </div>
-                        <p class="step-note">Installs uv, Python 3.11, clones the repo, sets up everything. No sudo needed.</p>
+                        <p class="step-note" id="step1-note">Installs uv, Python 3.11, clones the repo, sets up everything. No sudo needed.</p>
                     </div>
                 </div>
 
@@ -394,14 +422,7 @@ hermes gateway install</code></pre>
             </div>
 
             <div class="install-windows">
-                <p>Windows? Use WSL or PowerShell:</p>
+                <p>🪟 Windows requires <a href="https://git-scm.com/download/win" target="_blank" rel="noopener">Git for Windows</a> — Hermes uses Git Bash internally for shell commands.</p>
-                <div class="code-block code-block-sm">
-                    <div class="code-header">
-                        <span>powershell</span>
-                        <button class="copy-btn" onclick="copyText(this)" data-text="irm https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.ps1 | iex">Copy</button>
-                    </div>
-                    <pre><code>irm https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.ps1 | iex</code></pre>
-                </div>
             </div>
         </div>
     </section>

landingpage/script.js

@@ -2,11 +2,79 @@
 // Hermes Agent Landing Page — Interactions
 // =========================================================================
 
+// --- Platform install commands ---
+const PLATFORMS = {
+    linux: {
+        command: 'curl -fsSL https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.sh | bash',
+        prompt: '$',
+        note: 'Works on Linux, macOS & WSL · No prerequisites · Installs everything automatically',
+        stepNote: 'Installs uv, Python 3.11, clones the repo, sets up everything. No sudo needed.',
+    },
+    powershell: {
+        command: 'irm https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.ps1 | iex',
+        prompt: 'PS>',
+        note: 'Windows PowerShell · Requires Git for Windows · Installs everything automatically',
+        stepNote: 'Requires Git for Windows. Installs uv, Python 3.11, sets up everything.',
+    },
+    cmd: {
+        command: 'curl -fsSL https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.cmd -o install.cmd && install.cmd && del install.cmd',
+        prompt: '>',
+        note: 'Windows CMD · Requires Git for Windows · Installs everything automatically',
+        stepNote: 'Requires Git for Windows. Downloads and runs the installer, then cleans up.',
+    },
+};
+
+function detectPlatform() {
+    const ua = navigator.userAgent.toLowerCase();
+    if (ua.includes('win')) return 'powershell';
+    return 'linux';
+}
+
+function switchPlatform(platform) {
+    const cfg = PLATFORMS[platform];
+    if (!cfg) return;
+
+    // Update hero install widget
+    const commandEl = document.getElementById('install-command');
+    const promptEl = document.getElementById('install-prompt');
+    const noteEl = document.getElementById('install-note');
+
+    if (commandEl) commandEl.textContent = cfg.command;
+    if (promptEl) promptEl.textContent = cfg.prompt;
+    if (noteEl) noteEl.textContent = cfg.note;
+
+    // Update active tab in hero
+    document.querySelectorAll('.install-tab').forEach(tab => {
+        tab.classList.toggle('active', tab.dataset.platform === platform);
+    });
+
+    // Sync the step section tabs too
+    switchStepPlatform(platform);
+}
+
+function switchStepPlatform(platform) {
+    const cfg = PLATFORMS[platform];
+    if (!cfg) return;
+
+    const commandEl = document.getElementById('step1-command');
+    const copyBtn = document.getElementById('step1-copy');
+    const noteEl = document.getElementById('step1-note');
+
+    if (commandEl) commandEl.textContent = cfg.command;
+    if (copyBtn) copyBtn.setAttribute('data-text', cfg.command);
+    if (noteEl) noteEl.textContent = cfg.stepNote;
+
+    // Update active tab in step section
+    document.querySelectorAll('.code-tab').forEach(tab => {
+        tab.classList.toggle('active', tab.dataset.platform === platform);
+    });
+}
+
 // --- Copy to clipboard ---
 function copyInstall() {
     const text = document.getElementById('install-command').textContent;
     navigator.clipboard.writeText(text).then(() => {
-        const btn = document.querySelector('.hero-install .copy-btn');
+        const btn = document.querySelector('.install-widget-body .copy-btn');
         const original = btn.querySelector('.copy-text').textContent;
         btn.querySelector('.copy-text').textContent = 'Copied!';
         btn.style.color = 'var(--gold)';
@@ -243,6 +311,10 @@ class TerminalDemo {
 
 // --- Initialize ---
 document.addEventListener('DOMContentLoaded', () => {
+    // Auto-detect platform and set the right install command
+    const detectedPlatform = detectPlatform();
+    switchPlatform(detectedPlatform);
+
     initScrollAnimations();
 
     // Terminal demo - start when visible

landingpage/style.css

@@ -245,33 +245,132 @@ strong {
     margin-bottom: 32px;
 }
 
-.install-box {
+/* --- Install Widget (hero tabbed installer) --- */
-    display: flex;
+.install-widget {
-    align-items: center;
+    max-width: 740px;
-    gap: 0;
+    margin: 0 auto;
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius);
+    overflow: hidden;
+    transition: border-color 0.3s;
+}
+
+.install-widget:hover {
+    border-color: var(--border-hover);
+}
+
+.install-widget-header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 10px 16px;
+    background: rgba(255, 255, 255, 0.02);
+    border-bottom: 1px solid var(--border);
+}
+
+.install-dots {
+    display: flex;
+    gap: 6px;
+    flex-shrink: 0;
+}
+
+.install-dots .dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+}
+
+.install-tabs {
+    display: flex;
+    gap: 4px;
+    flex-wrap: wrap;
+}
+
+.install-tab {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 5px 14px;
+    border: none;
+    border-radius: 6px;
+    font-family: var(--font-sans);
+    font-size: 12px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+    background: transparent;
+    color: var(--text-muted);
+}
+
+.install-tab:hover {
+    color: var(--text-dim);
+    background: rgba(255, 255, 255, 0.04);
+}
+
+.install-tab.active {
+    background: rgba(255, 215, 0, 0.12);
+    color: var(--gold);
+}
+
+.install-tab svg {
+    flex-shrink: 0;
+}
+
+.install-widget-body {
+    display: flex;
+    align-items: center;
+    gap: 10px;
     padding: 14px 16px;
-    max-width: 680px;
-    margin: 0 auto;
     font-family: var(--font-mono);
     font-size: 13px;
     color: var(--text);
     overflow-x: auto;
-    transition: border-color 0.3s;
 }
 
-.install-box:hover {
+.install-prompt {
-    border-color: var(--border-hover);
+    color: var(--gold);
+    font-weight: 600;
+    flex-shrink: 0;
+    opacity: 0.7;
 }
 
-.install-box code {
+.install-widget-body code {
     flex: 1;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     text-align: left;
+    transition: opacity 0.15s;
+}
+
+/* --- Code block tabs (install step section) --- */
+.code-tabs {
+    display: flex;
+    gap: 2px;
+}
+
+.code-tab {
+    padding: 3px 10px;
+    border: none;
+    border-radius: 4px;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+    background: transparent;
+    color: var(--text-muted);
+}
+
+.code-tab:hover {
+    color: var(--text-dim);
+    background: rgba(255, 255, 255, 0.04);
+}
+
+.code-tab.active {
+    background: rgba(255, 215, 0, 0.1);
+    color: var(--gold);
 }
 
 .copy-btn {
@@ -948,17 +1047,35 @@ strong {
         margin: 0 auto 28px;
     }
 
-    .install-box {
+    .install-widget-body {
         font-size: 10px;
         padding: 10px 12px;
     }
 
-    .install-box code {
+    .install-widget-body code {
         overflow: hidden;
         text-overflow: ellipsis;
         display: block;
     }
 
+    .install-widget-header {
+        padding: 8px 12px;
+        gap: 10px;
+    }
+
+    .install-tabs {
+        gap: 2px;
+    }
+
+    .install-tab {
+        padding: 4px 10px;
+        font-size: 11px;
+    }
+
+    .install-tab svg {
+        display: none;
+    }
+
     .copy-btn {
         padding: 3px 6px;
     }