webssh2_client 1.0.0-alpha.1 → 2.0.0-alpha.1

package/README.md

@@ -97,9 +97,255 @@ Supported URL parameters include:
 - `host` - SSH server hostname
 - `port` - SSH server port (default: 22)
 - `header` - Optional header text
-- `headerBackground` - Optional header background color
+- `headerStyle` - Complete header styling with Tailwind CSS classes or CSS (recommended)
+- `headerBackground` - Header background styling only (legacy, see Advanced Header Styling below)
 - `sshterm` - Terminal type (default: xterm-color)
 
+#### Advanced Header Styling
+
+WebSSH2 Client supports comprehensive header styling through two approaches: **enhanced headerStyle** (recommended) and **legacy headerBackground** (maintained for backward compatibility).
+
+##### Enhanced Header Styling (headerStyle)
+
+The `headerStyle` parameter provides complete control over header appearance using Tailwind CSS classes or CSS properties:
+
+**Basic Examples:**
+
+```
+# Enhanced background with custom height and text
+?header=Production&headerStyle=bg-red-600%20h-10%20text-xl%20font-bold
+
+# Gradient with custom styling
+?header=Staging&headerStyle=bg-gradient-to-r%20from-blue-500%20to-purple-500%20h-8%20text-lg
+
+# Custom text colors and shadows
+?header=Development&headerStyle=bg-green-500%20text-black%20font-semibold%20shadow-lg
+```
+
+**Advanced Styling Capabilities:**
+
+**Backgrounds & Gradients:**
+
+```
+# Multi-directional gradients
+?headerStyle=bg-gradient-to-br%20from-purple-600%20via-pink-500%20to-yellow-400%20h-12
+
+# Solid colors with transparency
+?headerStyle=bg-blue-500%20h-8%20shadow-blue-500/50
+
+# Complex gradient patterns
+?headerStyle=bg-gradient-to-r%20from-red-500%20via-yellow-500%20to-green-500%20h-10
+```
+
+**Typography & Layout:**
+
+```
+# Large headers with custom fonts
+?headerStyle=bg-slate-700%20h-16%20text-3xl%20font-black%20flex%20items-center%20justify-center
+
+# Compact headers
+?headerStyle=bg-indigo-600%20h-5%20text-xs%20font-medium
+
+# Custom text alignment and colors
+?headerStyle=bg-gradient-to-r%20from-cyan-400%20to-blue-500%20text-left%20text-yellow-100%20px-4
+```
+
+**Borders & Effects:**
+
+```
+# Styled borders
+?headerStyle=bg-purple-500%20border-2%20border-white%20border-dashed%20h-8
+
+# Shadow effects
+?headerStyle=bg-green-500%20shadow-xl%20shadow-green-500/50%20rounded-lg%20h-10
+
+# Rounded corners
+?headerStyle=bg-gradient-to-r%20from-pink-400%20to-rose-500%20rounded-xl%20h-12%20mx-2
+```
+
+**Animations:**
+
+```
+# Pulsing effect for alerts
+?headerStyle=bg-red-600%20animate-pulse%20h-8%20font-bold
+
+# Bouncing for urgent notifications
+?headerStyle=bg-yellow-500%20animate-bounce%20h-10%20text-black%20font-semibold
+```
+
+**Production Examples:**
+
+```
+# Critical system warning
+?header=🚨%20PRODUCTION%20-%20CRITICAL%20🚨&headerStyle=bg-gradient-to-r%20from-red-600%20to-red-700%20h-12%20text-2xl%20font-bold%20animate-pulse%20shadow-lg
+
+# Development environment
+?header=🛠️%20Development%20Environment&headerStyle=bg-gradient-to-r%20from-green-400%20to-emerald-600%20h-8%20text-white%20font-medium
+
+# Staging deployment
+?header=🚀%20Staging%20Deployment&headerStyle=bg-gradient-to-r%20from-yellow-400%20to-orange-500%20h-10%20text-black%20font-semibold%20border-b-2%20border-orange-600
+
+# Secure connection
+?header=🔐%20Encrypted%20Connection&headerStyle=bg-gradient-to-r%20from-emerald-500%20to-teal-600%20h-8%20text-white%20shadow-md
+```
+
+##### Legacy Header Styling (headerBackground)
+
+For backward compatibility, the original `headerBackground` parameter is still supported:
+
+**Basic Colors:**
+
+```
+?header=Production&headerBackground=red
+?header=Custom&headerBackground=%23ff6b35
+```
+
+**Tailwind Classes:**
+
+```
+?header=Server%20Alpha&headerBackground=bg-blue-500
+?header=Critical%20System&headerBackground=bg-red-600
+```
+
+**Simple Gradients:**
+
+```
+?header=Gradient%20Demo&headerBackground=bg-gradient-to-r%20from-blue-500%20to-purple-500
+```
+
+##### Header Styling Reference
+
+**Essential Styling Categories:**
+
+**🎨 Background Colors & Gradients**
+
+```
+# Solid Colors
+bg-red-600, bg-blue-500, bg-green-500, bg-yellow-500, bg-purple-500
+bg-slate-700, bg-gray-800
+
+# Gradients (Direction + Colors)
+bg-gradient-to-r from-red-600 to-red-700
+bg-gradient-to-br from-purple-500 via-pink-500 to-yellow-400
+bg-gradient-to-tl from-blue-400 to-cyan-500
+```
+
+**📝 Text Styling**
+
+```
+# Sizes: text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, text-3xl, text-4xl
+# Weights: font-normal, font-medium, font-semibold, font-bold, font-black
+# Colors: text-white, text-black, text-yellow-100, text-red-100, text-blue-100
+
+# Examples
+text-2xl font-bold text-white
+text-sm font-medium text-black
+text-4xl font-black text-yellow-100
+```
+
+**📏 Header Heights**
+
+```
+# Available: h-4, h-5, h-6, h-7, h-8, h-10, h-12, h-14, h-16
+# Default was h-6 (24px), now customizable
+
+h-8     # Compact header
+h-12    # Standard header
+h-16    # Prominent header
+```
+
+**✨ Visual Effects**
+
+```
+# Animations
+animate-pulse    # Pulsing effect for alerts
+animate-bounce   # Bouncing for urgent notifications
+
+# Shadows
+shadow-md, shadow-lg, shadow-xl
+
+# Borders
+border-2 border-white border-dashed
+rounded-lg, rounded-xl
+```
+
+**📍 Layout & Positioning**
+
+```
+# Text Alignment
+text-left, text-center, text-right
+
+# Spacing
+px-4, px-6 (horizontal padding)
+py-2, py-3 (vertical padding)
+
+# Flexbox (for complex layouts)
+flex items-center justify-center
+```
+
+**Common Use Cases:**
+
+**🚨 Production/Critical Systems:**
+
+```
+# Red gradient with large text and pulsing animation
+bg-gradient-to-r from-red-600 to-red-700 h-12 text-2xl font-bold animate-pulse
+
+# Solid red with white border
+bg-red-600 border-2 border-white h-10 text-xl font-bold
+```
+
+**🚀 Staging/Development:**
+
+```
+# Yellow-orange gradient for staging
+bg-gradient-to-r from-yellow-400 to-orange-500 h-10 text-black font-semibold
+
+# Green for development
+bg-gradient-to-r from-green-400 to-emerald-600 h-8 text-white font-medium
+```
+
+**🔒 Secure/Special Connections:**
+
+```
+# Blue gradient with shadow
+bg-gradient-to-r from-blue-500 to-cyan-500 h-8 shadow-lg
+
+# Purple with rounded corners
+bg-purple-600 rounded-lg h-10 font-semibold
+```
+
+**⚡ Quick Reference:**
+
+- **Colors**: red, blue, green, yellow, purple, pink, cyan, emerald, slate, gray
+- **Shades**: 400 (lighter), 500 (medium), 600 (darker), 700 (darkest common)
+- **Text sizes**: xs, sm, base, lg, xl, 2xl, 3xl, 4xl
+- **Heights**: 4-16 (h-4 = 16px, h-16 = 64px)
+- **Combine freely**: `bg-blue-500 h-12 text-xl font-bold animate-pulse shadow-lg`
+
+##### Styling System Features
+
+**Automatic Detection:**
+The system automatically detects whether you're using:
+
+- Tailwind CSS classes (applied as CSS classes)
+- CSS color values (applied as inline styles)
+
+**Complete Tailwind Support:**
+
+- **Backgrounds:** Solid colors, gradients, transparency
+- **Typography:** Font sizes, weights, colors, alignment
+- **Layout:** Heights, padding, margins, flexbox
+- **Borders:** Styles, colors, radius
+- **Effects:** Shadows, animations
+- **Bundle Optimized:** Curated safelist keeps CSS file size reasonable (~38KB)
+
+**Backward Compatibility:**
+
+- Existing `headerBackground` URLs continue to work
+- Mixed usage supported (header + headerBackground or headerStyle)
+- Graceful fallback to CSS for non-Tailwind values
+
 ### Configuration Object
 
 You can configure the client by setting `window.webssh2Config`:

package/client/public/client.htm

@@ -1,149 +1,25 @@
-<!-- Version Version 1.0.0-alpha.1 - 2025-09-05T15:41:27.852Z - 200680b -->
+<!-- Version Version 2.0.0-alpha.1 - 2025-09-07T02:20:37.207Z - 5a009ff -->
 <!-- webssh2-client -->
 <!-- /client/src/client.htm -->
 <!DOCTYPE html>
-<html lang="en" class="h-dvh">
+<html lang="en" class="h-dvh bg-black">
   <head>
     <title>WebSSH2</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content">
     <link rel="icon" type="image/x-icon" href="./favicon.ico">
+    <style>
+      /* Prevent white flash during initial load */
+      html, body, #app {
+        background-color: #000 !important;
+        color: #f5f5f5 !important;
+      }
+    </style>
     <script type="module" crossorigin src="./webssh2.bundle.js"></script>
     <link rel="stylesheet" crossorigin href="./webssh2.css">
   </head>
   <body class="h-dvh overflow-hidden bg-black text-neutral-100">
-    <dialog id="loginDialog" class="modal">
-      <div class="modal-content relative bg-white text-slate-800 border border-neutral-300 rounded-md shadow-md p-6 w-80 sm:w-[28rem]">
-        <h2 class="text-lg font-semibold text-slate-900 mb-2">WebSSH2 Login</h2>
-        <form id="loginForm" class="space-y-3">
-          <label for="hostInput" class="sr-only">Host</label>
-          <input type="text" id="hostInput" name="host" placeholder="Host" required autocomplete="off" autocapitalize="off" spellcheck="false" enterkeyhint="next" class="block w-full rounded-md border border-slate-300 bg-white text-slate-900 placeholder-slate-400 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-          <label for="portInput" class="sr-only">Port</label>
-          <input type="text" id="portInput" name="port" placeholder="Port" value="22" autocomplete="off" autocapitalize="off" spellcheck="false" enterkeyhint="next" inputmode="numeric" pattern="[0-9]*" class="block w-full rounded-md border border-slate-300 bg-white text-slate-900 placeholder-slate-400 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-          <label for="usernameInput" class="sr-only">Username</label>
-          <input type="text" id="usernameInput" name="username" placeholder="Username" required autocomplete="username" autocapitalize="off" spellcheck="false" enterkeyhint="next" class="block w-full rounded-md border border-slate-300 bg-white text-slate-900 placeholder-slate-400 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-
-          <!-- Password section - always visible -->
-          <div class="password-wrapper relative w-full">
-            <label for="passwordInput" class="sr-only">Password</label>
-            <input type="password" id="passwordInput" name="password" placeholder="Password" autocomplete="current-password" autocapitalize="off" spellcheck="false" enterkeyhint="go" class="block w-full rounded-md border border-slate-300 bg-white text-slate-900 placeholder-slate-400 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-            <span id="capsLockIcon" class="hidden absolute right-2 top-1/2 -translate-y-1/2 text-red-500 pointer-events-none">⇪</span>
-          </div>
-
-          <!-- Options row: Add SSH Key + Options -->
-          <div class="flex items-center justify-between gap-2">
-            <div class="private-key-toggle">
-              <button type="button" id="privateKeyToggle" class="inline-flex items-center justify-center rounded-md border border-transparent px-3 py-2 text-sm font-medium bg-slate-600 text-white hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 disabled:opacity-50 disabled:pointer-events-none shadow-sm">
-                <i data-icon="key" class="icon-fw"></i> Add SSH Key
-              </button>
-            </div>
-            <div>
-              <button type="button" id="loginSettingsBtn" class="inline-flex items-center justify-center rounded-md border border-transparent px-3 py-2 text-sm font-medium bg-slate-700 text-white hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 disabled:opacity-50 disabled:pointer-events-none shadow-sm" aria-label="Options" title="Options">
-                <i data-icon="settings" class="icon-fw"></i> Options
-              </button>
-            </div>
-          </div>
-
-          <!-- Private key section (initially hidden) -->
-          <div id="privateKeySection" class="hidden">
-            <div class="private-key-input mt-2 p-3 rounded border border-neutral-300 bg-neutral-50 text-neutral-800">
-              <label for="privateKeyText" class="sr-only">Private Key</label>
-              <textarea id="privateKeyText" name="privateKey" autocomplete="off" autocapitalize="off" spellcheck="false"
-                placeholder="Paste your private key here" rows="3" class="block w-full rounded-md border border-slate-300 bg-white text-slate-900 placeholder-slate-400 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
-              <div class="file-upload">
-                <input type="file" id="privateKeyFile" class="sr-only">
-                <label for="privateKeyFile" class="inline-flex items-center justify-center rounded-md border border-transparent px-3 py-2 text-sm font-medium bg-slate-600 text-white hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 disabled:opacity-50 disabled:pointer-events-none shadow-sm">
-                  <i data-icon="upload" class="icon-fw"></i> Upload Key File
-                </label>
-              </div>
-              <label for="passphraseInput" class="sr-only">Key Passphrase</label>
-              <input type="password" id="passphraseInput" name="passphrase" autocomplete="off" autocapitalize="off" spellcheck="false" enterkeyhint="go"
-                placeholder="Key password (if encrypted)" class="optional block w-full rounded-md border border-slate-300 bg-white text-slate-900 placeholder-slate-400 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-            </div>
-          </div>
-
-          <div class="login-buttons mt-2">
-            <button type="submit" class="inline-flex w-full items-center justify-center rounded-md border border-transparent px-3 py-2 text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none">Connect</button>
-          </div>
-        </form>
-      </div>
-    </dialog>
-    <dialog id="errorDialog" class="modal">
-      <div class="modal-content relative error-modal bg-red-50 border border-red-400 rounded-md shadow-md p-5 w-80 sm:w-96">
-        <button type="button" autofocus class="close-button absolute top-2 right-2 text-neutral-400 hover:text-neutral-600 text-xl leading-none p-0 bg-transparent border-0">&times;</button>
-        <h2 class="text-red-700">Error</h2>
-        <p id="errorMessage"></p>
-      </div>
-    </dialog>
-<dialog id="promptDialog" class="modal">
-  <div class="modal-content relative prompt-modal bg-white text-slate-800 border border-neutral-300 rounded-md shadow-md p-5 w-80 sm:w-96">
-    <button type="button" autofocus class="close-button absolute top-2 right-2 text-neutral-400 hover:text-neutral-600 text-xl leading-none p-0 bg-transparent border-0">&times;</button>
-    <h2 id="promptMessage">Authentication Required</h2>
-    <form>
-      <div id="promptInputContainer" class="mb-4 space-y-2"></div>
-      <button type="submit" class="inline-flex items-center justify-center rounded-md border border-transparent px-3 py-2 text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none">Submit</button>
-    </form>
-  </div>
-</dialog>
-    <dialog id="terminalSettingsDialog" class="modal">
-      <div class="modal-content relative bg-white text-slate-800 border border-neutral-300 rounded-md shadow-md p-6 w-80 sm:w-[36rem]">
-        <h2 class="text-lg font-semibold text-slate-900 mb-2">Terminal Settings</h2>
-        <form id="terminalSettingsForm" class="space-y-2">
-          <fieldset class="grid grid-cols-1 sm:grid-cols-[auto,1fr] gap-x-4 gap-y-3 items-center">
-            <legend class="sr-only">Terminal Options</legend>
-            <label for="fontSize" class="text-sm font-medium text-slate-700 sm:text-right pr-3 whitespace-nowrap">Font Size</label>
-            <input type="number" id="fontSize" name="fontSize" min="8" max="72" required autocapitalize="off" spellcheck="false" class="block w-full rounded-md border border-slate-300 bg-white text-slate-900 placeholder-slate-400 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-
-            <label for="fontFamily" class="text-sm font-medium text-slate-700 sm:text-right pr-3 whitespace-nowrap">Font Family</label>
-            <input type="text" id="fontFamily" name="fontFamily" required autocapitalize="off" spellcheck="false" class="block w-full rounded-md border border-slate-300 bg-white text-slate-900 placeholder-slate-400 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-
-            <label for="cursorBlink" class="text-sm font-medium text-slate-700 sm:text-right pr-3 whitespace-nowrap">Cursor Blink</label>
-            <select id="cursorBlink" name="cursorBlink" class="block w-full rounded-md border border-slate-300 bg-white text-slate-900 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-              <option value="true">On</option>
-              <option value="false">Off</option>
-            </select>
-
-            <label for="scrollback" class="text-sm font-medium text-slate-700 sm:text-right pr-3 whitespace-nowrap">Scrollback</label>
-            <input type="number" id="scrollback" name="scrollback" min="1" max="200000" required autocapitalize="off" spellcheck="false" class="block w-full rounded-md border border-slate-300 bg-white text-slate-900 placeholder-slate-400 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-
-            <label for="tabStopWidth" class="text-sm font-medium text-slate-700 sm:text-right pr-3 whitespace-nowrap">Tab Stop Width</label>
-            <input type="number" id="tabStopWidth" name="tabStopWidth" min="1" max="100" required autocapitalize="off" spellcheck="false" class="block w-full rounded-md border border-slate-300 bg-white text-slate-900 placeholder-slate-400 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-
-            <label for="bellStyle" class="text-sm font-medium text-slate-700 sm:text-right pr-3 whitespace-nowrap">Bell Style</label>
-            <select id="bellStyle" name="bellStyle" class="block w-full rounded-md border border-slate-300 bg-white text-slate-900 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-              <option value="sound">Sound</option>
-              <option value="none">None</option>
-            </select>
-          </fieldset>
-          <div class="flex gap-2 pt-4 justify-end">
-            <button type="submit" class="inline-flex items-center justify-center rounded-md border border-transparent px-3 py-2 text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none">Save</button>
-            <button type="button" id="closeterminalSettingsBtn" class="inline-flex items-center justify-center rounded-md border border-transparent px-3 py-2 text-sm font-medium bg-slate-700 text-white hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 disabled:opacity-50 disabled:pointer-events-none">Cancel</button>
-          </div>
-        </form>
-      </div>
-    </dialog>
-    <div id="backdrop" class="backdrop hidden"></div>
-    <button type="button" id="reconnectButton" class="hidden fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-[1001] bg-blue-600 hover:bg-blue-700 text-white text-sm px-5 py-2 rounded shadow focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Reconnect</button>
-    <div class="box">
-      <div id="header" class="hidden w-full text-center z-[99] h-6 leading-6 bg-green-600 text-white border-b border-neutral-200 shrink-0"></div>
-      <div id="terminalContainer" class="terminal hidden flex-1 min-h-0 w-[calc(100%-1px)] max-w-[100vw] mx-auto p-[2px] pb-[env(safe-area-inset-bottom)] overscroll-contain touch-pan-y overflow-hidden"></div>
-      <div id="bottomdiv" class="z-[99] h-6 flex items-center bg-neutral-800 text-neutral-100 border-t border-neutral-200 shrink-0">
-        <div id="menu" class="relative group px-2">
-          <button id="menuToggle" type="button" aria-controls="dropupContent" aria-expanded="false" class="inline-flex items-center gap-1 select-none">
-            <i data-icon="menu" class="w-5 h-5 inline-block"></i> Menu
-          </button>
-          <div id="dropupContent" class="hidden group-hover:block absolute bottom-full left-0 min-w-56 bg-neutral-50 text-neutral-700 text-base shadow-md border border-neutral-200 z-[101]">
-            <button type="button" id="clearLogBtn" class="hidden w-full text-left px-4 py-3 hover:bg-neutral-200 whitespace-nowrap inline-flex items-center gap-3"><i data-icon="trash-can" class="w-5 h-5 inline-block"></i> Clear Log</button>
-            <button type="button" id="stopLogBtn" class="hidden w-full text-left px-4 py-3 hover:bg-neutral-200 whitespace-nowrap inline-flex items-center gap-3"><i data-icon="settings" class="animate-spin origin-center w-5 h-5 inline-block"></i> Stop Log</button>
-            <button type="button" id="startLogBtn" class="w-full text-left px-4 py-3 hover:bg-neutral-200 whitespace-nowrap inline-flex items-center gap-3"><i data-icon="clipboard" class="w-5 h-5 inline-block"></i> Start Log</button>
-            <button type="button" id="downloadLogBtn" class="hidden w-full text-left px-4 py-3 hover:bg-neutral-200 whitespace-nowrap inline-flex items-center gap-3"><i data-icon="download" class="w-5 h-5 inline-block"></i> Download Log</button>
-            <button type="button" id="replayCredentialsBtn" class="w-full text-left px-4 py-3 hover:bg-neutral-200 whitespace-nowrap inline-flex items-center gap-3"><i data-icon="key" class="w-5 h-5 inline-block"></i> Credentials</button>
-            <button type="button" id="reauthBtn" class="w-full text-left px-4 py-3 hover:bg-neutral-200 whitespace-nowrap inline-flex items-center gap-3"><i data-icon="key" class="w-5 h-5 inline-block"></i> Switch User</button>
-            <button type="button" id="terminalSettingsBtn" class="w-full text-left px-4 py-3 hover:bg-neutral-200 whitespace-nowrap inline-flex items-center gap-3"><i data-icon="settings" class="w-5 h-5 inline-block"></i> Settings</button>
-          </div>
-        </div>
-        <div id="footer" class="inline-block text-left px-[10px] border-l border-neutral-200"></div>
-        <div id="status" role="status" aria-live="polite" aria-atomic="true" class="inline-block text-left px-[10px] z-[100] border-x border-neutral-200"></div>
-      </div>
-    </div>
+    <!-- SolidJS app will mount here -->
+    <!-- Static status element for testing (will be replaced by SolidJS app) -->
+    <div id="status" role="status" aria-live="polite" aria-atomic="true" class="hidden">Initializing...</div>
   </body>
 </html>