@openqa/cli 2.1.0 → 2.1.2

package/dist/cli/index.js

@@ -2668,7 +2668,7 @@ function getDashboardHTML() {
     .logo-mark {
       width: 34px;
       height: 34px;
-      background: var(--accent);
+      background: transparent;
       border-radius: 8px;
       display: grid;
       place-items: center;
@@ -3290,7 +3290,9 @@ function getDashboardHTML() {
   <!-- Sidebar -->
   <aside>
     <div class="logo">
-      <div class="logo-mark">\u{1F52C}</div>
+      <div class="logo-mark">
+       <img src="https://openqa.orkajs.com/_next/image?url=https%3A%2F%2Forkajs.com%2Floutre-orka-qa.png&w=256&q=75" alt="OpenQA Logo" style="width: 40px; height: 40px;">
+      </div>
       <div>
         <div class="logo-name">OpenQA</div>
         <div class="logo-version">v2.1.0 \xB7 OSS</div>
@@ -3300,42 +3302,69 @@ function getDashboardHTML() {
     <div class="nav-section">
       <div class="nav-label">Overview</div>
       <a class="nav-item active" href="/">
-        <span class="icon">\u25A6</span> Dashboard
+        <span class="icon">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-gauge-icon lucide-gauge"><path d="m12 14 4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/></svg>
+        </span> Dashboard
       </a>
       <a class="nav-item" href="/kanban">
-        <span class="icon">\u229E</span> Kanban
+        <span class="icon">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-dashed-kanban-icon lucide-square-dashed-kanban"><path d="M8 7v7"/><path d="M12 7v4"/><path d="M16 7v9"/><path d="M5 3a2 2 0 0 0-2 2"/><path d="M9 3h1"/><path d="M14 3h1"/><path d="M19 3a2 2 0 0 1 2 2"/><path d="M21 9v1"/><path d="M21 14v1"/><path d="M21 19a2 2 0 0 1-2 2"/><path d="M14 21h1"/><path d="M9 21h1"/><path d="M5 21a2 2 0 0 1-2-2"/><path d="M3 14v1"/><path d="M3 9v1"/></svg>
+        </span> Kanban
         <span class="badge" id="kanban-count">0</span>
       </a>
 
       <div class="nav-label">Agents</div>
       <a class="nav-item" href="javascript:void(0)" onclick="scrollToSection('agents-table')">
-        <span class="icon">\u25CE</span> Active Agents
+        <span class="icon">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-activity-icon lucide-activity"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"/></svg>
+        </span> Active Agents
       </a>
       <a class="nav-item" href="javascript:void(0)" onclick="switchAgentTab('specialists'); scrollToSection('agents-table')">
-        <span class="icon">\u25C7</span> Specialists
+        <span class="icon">
+         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-hat-glasses-icon lucide-hat-glasses"><path d="M14 18a2 2 0 0 0-4 0"/><path d="m19 11-2.11-6.657a2 2 0 0 0-2.752-1.148l-1.276.61A2 2 0 0 1 12 4H8.5a2 2 0 0 0-1.925 1.456L5 11"/><path d="M2 11h20"/><circle cx="17" cy="18" r="3"/><circle cx="7" cy="18" r="3"/></svg>
+        </span> Specialists
       </a>
       <a class="nav-item" href="javascript:void(0)" onclick="scrollToSection('interventions-panel')">
-        <span class="icon">\u26A0</span> Interventions
+        <span class="icon">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-cog-icon lucide-user-cog"><path d="M10 15H6a4 4 0 0 0-4 4v2"/><path d="m14.305 16.53.923-.382"/><path d="m15.228 13.852-.923-.383"/><path d="m16.852 12.228-.383-.923"/><path d="m16.852 17.772-.383.924"/><path d="m19.148 12.228.383-.923"/><path d="m19.53 18.696-.382-.924"/><path d="m20.772 13.852.924-.383"/><path d="m20.772 16.148.924.383"/><circle cx="18" cy="15" r="3"/><circle cx="9" cy="7" r="4"/></svg>
+        </span> Interventions
         <span class="badge" id="intervention-count" style="background: var(--red);">0</span>
       </a>
 
       <div class="nav-label">Analysis</div>
       <a class="nav-item" href="javascript:void(0)" onclick="scrollToSection('issues-panel')">
-        <span class="icon">\u{1F41B}</span> Bug Reports
+        <span class="icon">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bug-play-icon lucide-bug-play"><path d="M10 19.655A6 6 0 0 1 6 14v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 3.97"/><path d="M14 15.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997a1 1 0 0 1-1.517-.86z"/>
+            <path d="M14.12 3.88 16 2"/>
+            <path d="M21 5a4 4 0 0 1-3.55 3.97"/>
+            <path d="M3 21a4 4 0 0 1 3.81-4"/>
+            <path d="M3 5a4 4 0 0 0 3.55 3.97"/>
+            <path d="M6 13H2"/><path d="m8 2 1.88 1.88"/>
+            <path d="M9 7.13V6a3 3 0 1 1 6 0v1.13"/>
+          </svg>
+        </span> Bug Reports
       </a>
       <a class="nav-item" href="javascript:void(0)" onclick="switchChartTab('performance'); scrollToSection('chart-performance')">
-        <span class="icon">\u26A1</span> Performance
+        <span class="icon">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chart-spline-icon lucide-chart-spline"><path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="M7 16c.5-2 1.5-7 4-7 2 0 2 3 4 3 2.5 0 4.5-5 5-7"/></svg>
+        </span> Performance
       </a>
       <a class="nav-item" href="javascript:void(0)" onclick="scrollToSection('activity-list')">
-        <span class="icon">\u{1F4CB}</span> Logs
+        <span class="icon">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scroll-text-icon lucide-scroll-text"><path d="M15 12h-5"/><path d="M15 8h-5"/><path d="M19 17V5a2 2 0 0 0-2-2H4"/><path d="M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3"/></svg>
+        </span> Logs
       </a>
 
       <div class="nav-label">System</div>
       <a class="nav-item" href="/config">
-        <span class="icon">\u2699</span> Config
+        <span class="icon">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-columns3-cog-icon lucide-columns-3-cog"><path d="M10.5 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v5.5"/><path d="m14.3 19.6 1-.4"/><path d="M15 3v7.5"/><path d="m15.2 16.9-.9-.3"/><path d="m16.6 21.7.3-.9"/><path d="m16.8 15.3-.4-1"/><path d="m19.1 15.2.3-.9"/><path d="m19.6 21.7-.4-1"/><path d="m20.7 16.8 1-.4"/><path d="m21.7 19.4-.9-.3"/><path d="M9 3v18"/><circle cx="18" cy="18" r="3"/></svg>
+        </span> Config
       </a>
       <a class="nav-item" href="/config/env">
-        <span class="icon">\u{1F527}</span> Environment
+        <span class="icon">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-columns3-cog-icon lucide-columns-3-cog"><path d="M10.5 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v5.5"/><path d="m14.3 19.6 1-.4"/><path d="M15 3v7.5"/><path d="m15.2 16.9-.9-.3"/><path d="m16.6 21.7.3-.9"/><path d="m16.8 15.3-.4-1"/><path d="m19.1 15.2.3-.9"/><path d="m19.6 21.7-.4-1"/><path d="m20.7 16.8 1-.4"/><path d="m21.7 19.4-.9-.3"/><path d="M9 3v18"/><circle cx="18" cy="18" r="3"/></svg>
+        </span> Environment
       </a>
     </div>
 
@@ -3367,7 +3396,9 @@ function getDashboardHTML() {
         <div class="metric-card">
           <div class="metric-header">
             <div class="metric-label">Active Agents</div>
-            <div class="metric-icon">\u{1F916}</div>
+            <div class="metric-icon">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-terminal-icon lucide-square-terminal"><path d="m7 11 2-2-2-2"/><path d="M11 13h4"/><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/></svg>
+            </div>
           </div>
           <div class="metric-value" id="active-agents">0</div>
           <div class="metric-change positive" id="agents-change">\u2191 0 from last hour</div>
@@ -3375,7 +3406,9 @@ function getDashboardHTML() {
         <div class="metric-card">
           <div class="metric-header">
             <div class="metric-label">Total Actions</div>
-            <div class="metric-icon">\u26A1</div>
+            <div class="metric-icon">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-list-todo-icon lucide-list-todo"><path d="M13 5h8"/><path d="M13 12h8"/><path d="M13 19h8"/><path d="m3 17 2 2 4-4"/><rect x="3" y="4" width="6" height="6" rx="1"/></svg>
+            </div>
           </div>
           <div class="metric-value" id="total-actions">0</div>
           <div class="metric-change positive" id="actions-change">\u2191 0% this session</div>
@@ -3383,7 +3416,9 @@ function getDashboardHTML() {
         <div class="metric-card">
           <div class="metric-header">
             <div class="metric-label">Bugs Found</div>
-            <div class="metric-icon">\u{1F41B}</div>
+            <div class="metric-icon">
+               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-list-todo-icon lucide-list-todo"><path d="M13 5h8"/><path d="M13 12h8"/><path d="M13 19h8"/><path d="m3 17 2 2 4-4"/><rect x="3" y="4" width="6" height="6" rx="1"/></svg>
+            </div>
           </div>
           <div class="metric-value" id="bugs-found">0</div>
           <div class="metric-change negative" id="bugs-change">\u2193 0 from yesterday</div>
@@ -3391,7 +3426,9 @@ function getDashboardHTML() {
         <div class="metric-card">
           <div class="metric-header">
             <div class="metric-label">Success Rate</div>
-            <div class="metric-icon">\u2713</div>
+            <div class="metric-icon">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-cloud-check-icon lucide-cloud-check"><path d="m17 15-5.5 5.5L9 18"/><path d="M5.516 16.07A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 3.501 7.327"/></svg>
+            </div>
           </div>
           <div class="metric-value" id="success-rate">\u2014</div>
           <div class="metric-change positive" id="rate-change">\u2191 0 pts improvement</div>
@@ -5655,672 +5692,860 @@ function getEnvHTML() {
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Environment Variables - OpenQA</title>
+  <title>OpenQA \u2014 Environment</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;600;700;800&display=swap" rel="stylesheet">
   <style>
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    
+    :root {
+      --bg: #080b10;
+      --surface: #0d1117;
+      --panel: #111720;
+      --border: rgba(255,255,255,0.06);
+      --border-hi: rgba(255,255,255,0.12);
+      --accent: #f97316;
+      --accent-lo: rgba(249,115,22,0.08);
+      --accent-md: rgba(249,115,22,0.18);
+      --green: #22c55e;
+      --green-lo: rgba(34,197,94,0.08);
+      --red: #ef4444;
+      --red-lo: rgba(239,68,68,0.08);
+      --amber: #f59e0b;
+      --amber-lo: rgba(245,158,11,0.08);
+      --blue: #38bdf8;
+      --blue-lo: rgba(56,189,248,0.08);
+      --text-1: #f1f5f9;
+      --text-2: #8b98a8;
+      --text-3: #4b5563;
+      --mono: 'DM Mono', monospace;
+      --sans: 'Syne', sans-serif;
+      --radius: 10px;
+      --radius-lg: 16px;
+    }
+
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
     body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      font-family: var(--sans);
+      background: var(--bg);
+      color: var(--text-1);
       min-height: 100vh;
-      padding: 20px;
+      overflow-x: hidden;
     }
 
-    .container {
-      max-width: 1200px;
-      margin: 0 auto;
+    /* \u2500\u2500 Layout \u2500\u2500 */
+    .shell {
+      display: grid;
+      grid-template-columns: 220px 1fr;
+      min-height: 100vh;
     }
 
-    .header {
-      background: rgba(255, 255, 255, 0.95);
-      backdrop-filter: blur(10px);
-      padding: 20px 30px;
-      border-radius: 12px;
-      margin-bottom: 20px;
-      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    /* \u2500\u2500 Sidebar \u2500\u2500 */
+    aside {
+      background: var(--surface);
+      border-right: 1px solid var(--border);
       display: flex;
-      justify-content: space-between;
-      align-items: center;
+      flex-direction: column;
+      padding: 28px 0;
+      position: sticky;
+      top: 0;
+      height: 100vh;
     }
 
-    .header h1 {
-      font-size: 24px;
-      color: #1a202c;
+    .logo {
       display: flex;
       align-items: center;
       gap: 10px;
+      padding: 0 24px 32px;
+      border-bottom: 1px solid var(--border);
+      margin-bottom: 12px;
     }
 
-    .header-actions {
-      display: flex;
-      gap: 10px;
+    .logo-mark {
+      width: 34px; height: 34px;
+      background: var(--accent);
+      border-radius: 8px;
+      display: grid;
+      place-items: center;
+      font-size: 17px;
+      font-weight: 800;
+      color: #fff;
     }
 
-    .btn {
-      padding: 10px 20px;
-      border: none;
-      border-radius: 8px;
+    .logo-name { font-weight: 800; font-size: 18px; letter-spacing: -0.5px; }
+    .logo-version { font-family: var(--mono); font-size: 10px; color: var(--text-3); }
+
+    .nav-section { padding: 8px 12px; flex: 1; overflow-y: auto; }
+
+    .nav-label {
+      font-family: var(--mono);
+      font-size: 10px;
+      color: var(--text-3);
+      letter-spacing: 1.5px;
+      text-transform: uppercase;
+      padding: 0 12px;
+      margin: 16px 0 6px;
+    }
+
+    .nav-item {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 9px 12px;
+      border-radius: var(--radius);
+      color: var(--text-2);
+      text-decoration: none;
       font-size: 14px;
       font-weight: 600;
+      transition: all 0.15s ease;
       cursor: pointer;
-      transition: all 0.2s;
-      text-decoration: none;
-      display: inline-flex;
-      align-items: center;
-      gap: 8px;
     }
+    .nav-item:hover { color: var(--text-1); background: var(--panel); }
+    .nav-item.active { color: var(--accent); background: var(--accent-lo); }
+    .nav-item .icon { font-size: 15px; width: 20px; text-align: center; }
 
-    .btn-primary {
-      background: #667eea;
-      color: white;
+    .sidebar-footer {
+      padding: 16px 24px;
+      border-top: 1px solid var(--border);
     }
 
-    .btn-primary:hover {
-      background: #5568d3;
-      transform: translateY(-1px);
-    }
+    /* \u2500\u2500 Main \u2500\u2500 */
+    main { display: flex; flex-direction: column; min-height: 100vh; overflow-y: auto; }
 
-    .btn-secondary {
-      background: #e2e8f0;
-      color: #4a5568;
+    .topbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 20px 32px;
+      border-bottom: 1px solid var(--border);
+      background: var(--surface);
+      position: sticky;
+      top: 0;
+      z-index: 10;
     }
 
-    .btn-secondary:hover {
-      background: #cbd5e0;
-    }
+    .page-title { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; }
+    .page-sub { font-family: var(--mono); font-size: 11px; color: var(--text-3); margin-top: 2px; }
 
-    .btn-success {
-      background: #48bb78;
-      color: white;
-    }
+    .topbar-actions { display: flex; align-items: center; gap: 10px; }
 
-    .btn-success:hover {
-      background: #38a169;
+    .btn {
+      font-family: var(--sans);
+      font-weight: 700;
+      font-size: 12px;
+      padding: 8px 16px;
+      border-radius: 8px;
+      border: none;
+      cursor: pointer;
+      transition: all 0.15s ease;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      text-decoration: none;
     }
+    .btn:disabled { opacity: 0.4; cursor: not-allowed; }
 
-    .btn:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
+    .btn-ghost {
+      background: var(--panel);
+      color: var(--text-2);
+      border: 1px solid var(--border);
     }
+    .btn-ghost:hover { border-color: var(--border-hi); color: var(--text-1); }
 
-    .content {
-      background: rgba(255, 255, 255, 0.95);
-      backdrop-filter: blur(10px);
-      padding: 30px;
-      border-radius: 12px;
-      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    .btn-primary {
+      background: var(--accent);
+      color: #fff;
     }
+    .btn-primary:hover:not(:disabled) { background: #ea580c; box-shadow: 0 0 20px rgba(249,115,22,0.35); }
 
-    .tabs {
+    /* \u2500\u2500 Content \u2500\u2500 */
+    .content { padding: 28px 32px; display: flex; flex-direction: column; gap: 24px; }
+
+    /* \u2500\u2500 Tabs (category selector) \u2500\u2500 */
+    .tab-bar {
       display: flex;
-      gap: 10px;
-      margin-bottom: 30px;
-      border-bottom: 2px solid #e2e8f0;
-      padding-bottom: 10px;
+      gap: 4px;
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      padding: 4px;
+      flex-wrap: wrap;
     }
 
-    .tab {
-      padding: 10px 20px;
+    .tab-btn {
+      padding: 7px 14px;
+      background: transparent;
       border: none;
-      background: none;
-      font-size: 14px;
+      border-radius: 7px;
+      color: var(--text-3);
+      font-family: var(--sans);
+      font-size: 12px;
       font-weight: 600;
-      color: #718096;
       cursor: pointer;
-      border-bottom: 3px solid transparent;
-      transition: all 0.2s;
-    }
-
-    .tab.active {
-      color: #667eea;
-      border-bottom-color: #667eea;
+      transition: all 0.15s ease;
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+      gap: 5px;
     }
-
-    .tab:hover {
-      color: #667eea;
+    .tab-btn:hover { color: var(--text-2); }
+    .tab-btn.active {
+      background: var(--panel);
+      color: var(--text-1);
+      border: 1px solid var(--border-hi);
     }
-
-    .category-section {
-      display: none;
+    .tab-btn .tab-dot {
+      width: 6px; height: 6px;
+      border-radius: 50%;
+      background: var(--text-3);
     }
+    .tab-btn.has-required .tab-dot { background: var(--amber); }
+    .tab-btn.active .tab-dot { background: var(--accent); }
 
-    .category-section.active {
-      display: block;
-    }
+    /* \u2500\u2500 Section \u2500\u2500 */
+    .section { display: none; flex-direction: column; gap: 16px; }
+    .section.active { display: flex; }
 
-    .category-header {
+    .section-header {
       display: flex;
-      justify-content: space-between;
       align-items: center;
-      margin-bottom: 20px;
-    }
-
-    .category-title {
-      font-size: 18px;
-      font-weight: 600;
-      color: #2d3748;
-    }
-
-    .env-grid {
-      display: grid;
-      gap: 20px;
+      gap: 12px;
+      margin-bottom: 4px;
     }
-
-    .env-item {
-      border: 1px solid #e2e8f0;
+    .section-icon {
+      width: 36px; height: 36px;
+      background: var(--accent-lo);
+      border: 1px solid var(--accent-md);
       border-radius: 8px;
-      padding: 20px;
-      transition: all 0.2s;
+      display: grid;
+      place-items: center;
+      font-size: 16px;
     }
+    .section-title { font-size: 15px; font-weight: 700; }
+    .section-desc { font-family: var(--mono); font-size: 11px; color: var(--text-3); margin-top: 2px; }
 
-    .env-item:hover {
-      border-color: #cbd5e0;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    /* \u2500\u2500 Env card \u2500\u2500 */
+    .env-card {
+      background: var(--panel);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      padding: 20px 24px;
+      transition: border-color 0.15s;
     }
+    .env-card:hover { border-color: var(--border-hi); }
+    .env-card.has-value { border-color: rgba(249,115,22,0.15); }
 
-    .env-item-header {
+    .env-card-head {
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
-      margin-bottom: 10px;
+      margin-bottom: 6px;
     }
 
-    .env-label {
-      font-weight: 600;
-      color: #2d3748;
-      font-size: 14px;
+    .env-key {
+      font-family: var(--mono);
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--text-1);
       display: flex;
       align-items: center;
       gap: 8px;
     }
 
-    .required-badge {
-      background: #fc8181;
-      color: white;
-      font-size: 10px;
-      padding: 2px 6px;
+    .badge-required {
+      font-family: var(--sans);
+      font-size: 9px;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      background: rgba(239,68,68,0.15);
+      color: var(--red);
+      border: 1px solid rgba(239,68,68,0.25);
       border-radius: 4px;
+      padding: 2px 6px;
+    }
+    .badge-sensitive {
+      font-size: 9px;
       font-weight: 700;
+      font-family: var(--sans);
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      background: var(--amber-lo);
+      color: var(--amber);
+      border: 1px solid rgba(245,158,11,0.2);
+      border-radius: 4px;
+      padding: 2px 6px;
     }
 
-    .env-description {
-      font-size: 13px;
-      color: #718096;
-      margin-bottom: 10px;
+    .env-desc {
+      font-family: var(--mono);
+      font-size: 11px;
+      color: var(--text-3);
+      margin-bottom: 14px;
+      line-height: 1.5;
     }
 
-    .env-input-group {
+    .env-input-row {
       display: flex;
-      gap: 10px;
+      gap: 8px;
       align-items: center;
     }
 
-    .env-input {
+    .env-input, .env-select {
       flex: 1;
-      padding: 10px 12px;
-      border: 1px solid #e2e8f0;
-      border-radius: 6px;
-      font-size: 14px;
-      font-family: 'Monaco', 'Courier New', monospace;
-      transition: all 0.2s;
-    }
-
-    .env-input:focus {
+      background: var(--surface);
+      border: 1px solid var(--border-hi);
+      border-radius: 8px;
+      padding: 10px 14px;
+      font-family: var(--mono);
+      font-size: 13px;
+      color: var(--text-1);
       outline: none;
-      border-color: #667eea;
-      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+      transition: border-color 0.15s, box-shadow 0.15s;
+      appearance: none;
     }
-
-    .env-input.error {
-      border-color: #fc8181;
+    .env-input:focus, .env-select:focus {
+      border-color: var(--accent);
+      box-shadow: 0 0 0 3px rgba(249,115,22,0.12);
     }
+    .env-input.changed { border-color: rgba(249,115,22,0.5); }
+    .env-input.invalid { border-color: var(--red); }
 
-    .env-actions {
-      display: flex;
-      gap: 5px;
-    }
+    .env-select option { background: var(--panel); }
 
-    .icon-btn {
-      padding: 8px;
-      border: none;
-      background: #e2e8f0;
-      border-radius: 6px;
+    .env-action-btn {
+      width: 36px; height: 36px;
+      border-radius: 8px;
+      border: 1px solid var(--border-hi);
+      background: var(--surface);
+      color: var(--text-2);
       cursor: pointer;
-      transition: all 0.2s;
-      font-size: 16px;
-    }
-
-    .icon-btn:hover {
-      background: #cbd5e0;
-    }
-
-    .icon-btn.test {
-      background: #bee3f8;
-      color: #2c5282;
-    }
-
-    .icon-btn.test:hover {
-      background: #90cdf4;
-    }
-
-    .icon-btn.generate {
-      background: #c6f6d5;
-      color: #22543d;
-    }
-
-    .icon-btn.generate:hover {
-      background: #9ae6b4;
+      display: grid;
+      place-items: center;
+      font-size: 14px;
+      transition: all 0.15s;
+      flex-shrink: 0;
     }
+    .env-action-btn:hover { background: var(--panel); color: var(--text-1); border-color: var(--border-hi); }
+    .env-action-btn.test-btn:hover { background: var(--blue-lo); color: var(--blue); border-color: rgba(56,189,248,0.25); }
+    .env-action-btn.gen-btn:hover { background: var(--green-lo); color: var(--green); border-color: rgba(34,197,94,0.25); }
 
-    .error-message {
-      color: #e53e3e;
-      font-size: 12px;
-      margin-top: 5px;
+    .env-feedback {
+      font-family: var(--mono);
+      font-size: 11px;
+      margin-top: 8px;
+      min-height: 16px;
     }
+    .env-feedback.error { color: var(--red); }
+    .env-feedback.success { color: var(--green); }
 
-    .success-message {
-      color: #38a169;
-      font-size: 12px;
-      margin-top: 5px;
+    /* \u2500\u2500 Toast \u2500\u2500 */
+    .toast-zone {
+      position: fixed;
+      bottom: 24px;
+      right: 24px;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      z-index: 100;
     }
 
-    .alert {
-      padding: 15px 20px;
-      border-radius: 8px;
-      margin-bottom: 20px;
+    .toast {
+      padding: 12px 18px;
+      border-radius: 10px;
+      font-size: 13px;
+      font-weight: 600;
       display: flex;
       align-items: center;
       gap: 10px;
+      animation: slideIn 0.2s ease;
+      max-width: 380px;
     }
+    .toast.success { background: var(--panel); border: 1px solid rgba(34,197,94,0.3); color: var(--green); }
+    .toast.error { background: var(--panel); border: 1px solid rgba(239,68,68,0.3); color: var(--red); }
+    .toast.warning { background: var(--panel); border: 1px solid rgba(245,158,11,0.3); color: var(--amber); }
+    .toast.info { background: var(--panel); border: 1px solid rgba(56,189,248,0.3); color: var(--blue); }
 
-    .alert-warning {
-      background: #fef5e7;
-      border-left: 4px solid #f59e0b;
-      color: #92400e;
-    }
-
-    .alert-info {
-      background: #eff6ff;
-      border-left: 4px solid #3b82f6;
-      color: #1e40af;
+    @keyframes slideIn {
+      from { opacity: 0; transform: translateY(8px); }
+      to { opacity: 1; transform: translateY(0); }
     }
 
-    .alert-success {
-      background: #f0fdf4;
-      border-left: 4px solid #10b981;
-      color: #065f46;
+    /* \u2500\u2500 Modal (test result) \u2500\u2500 */
+    .modal-backdrop {
+      display: none;
+      position: fixed; inset: 0;
+      background: rgba(0,0,0,0.6);
+      z-index: 200;
+      align-items: center;
+      justify-content: center;
     }
+    .modal-backdrop.open { display: flex; }
 
-    .loading {
-      text-align: center;
-      padding: 40px;
-      color: #718096;
+    .modal {
+      background: var(--surface);
+      border: 1px solid var(--border-hi);
+      border-radius: var(--radius-lg);
+      padding: 28px;
+      width: 420px;
+      max-width: 90vw;
+      box-shadow: 0 24px 64px rgba(0,0,0,0.5);
+    }
+    .modal-title { font-size: 15px; font-weight: 700; margin-bottom: 16px; }
+    .modal-body { margin-bottom: 20px; }
+    .modal-result {
+      padding: 14px;
+      border-radius: 8px;
+      font-family: var(--mono);
+      font-size: 12px;
     }
+    .modal-result.ok { background: var(--green-lo); border: 1px solid rgba(34,197,94,0.2); color: var(--green); }
+    .modal-result.fail { background: var(--red-lo); border: 1px solid rgba(239,68,68,0.2); color: var(--red); }
+    .modal-footer { display: flex; justify-content: flex-end; }
 
+    /* \u2500\u2500 Spinner \u2500\u2500 */
     .spinner {
-      border: 3px solid #e2e8f0;
-      border-top: 3px solid #667eea;
+      width: 36px; height: 36px;
+      border: 3px solid var(--border);
+      border-top-color: var(--accent);
       border-radius: 50%;
-      width: 40px;
-      height: 40px;
-      animation: spin 1s linear infinite;
-      margin: 0 auto 20px;
+      animation: spin 0.8s linear infinite;
+      margin: 0 auto 16px;
     }
+    @keyframes spin { to { transform: rotate(360deg); } }
 
-    @keyframes spin {
-      0% { transform: rotate(0deg); }
-      100% { transform: rotate(360deg); }
+    .loading-state {
+      text-align: center;
+      padding: 60px 0;
+      color: var(--text-3);
+      font-family: var(--mono);
+      font-size: 12px;
     }
 
-    .modal {
+    /* \u2500\u2500 Restart banner \u2500\u2500 */
+    .restart-banner {
       display: none;
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: rgba(0, 0, 0, 0.5);
-      z-index: 1000;
+      background: var(--amber-lo);
+      border: 1px solid rgba(245,158,11,0.25);
+      border-radius: 10px;
+      padding: 12px 18px;
+      font-size: 13px;
+      color: var(--amber);
+      font-weight: 600;
       align-items: center;
-      justify-content: center;
+      gap: 10px;
     }
+    .restart-banner.show { display: flex; }
+  </style>
+</head>
+<body>
+<div class="shell">
 
-    .modal.show {
-      display: flex;
-    }
+  <!-- Sidebar -->
+  <aside>
+    <div class="logo">
+      <div class="logo-mark">Q</div>
+      <div>
+        <div class="logo-name">OpenQA</div>
+        <div class="logo-version">v1.3.4</div>
+      </div>
+    </div>
 
-    .modal-content {
-      background: white;
-      padding: 30px;
-      border-radius: 12px;
-      max-width: 500px;
-      width: 90%;
-      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
-    }
+    <div class="nav-section">
+      <div class="nav-label">Overview</div>
+      <a class="nav-item" href="/">
+        <span class="icon">\u{1F4CA}</span> Dashboard
+      </a>
+      <a class="nav-item" href="/sessions">
+        <span class="icon">\u{1F9EA}</span> Sessions
+      </a>
+      <a class="nav-item" href="/issues">
+        <span class="icon">\u{1F41B}</span> Issues
+      </a>
 
-    .modal-header {
-      font-size: 20px;
-      font-weight: 600;
-      margin-bottom: 15px;
-      color: #2d3748;
-    }
+      <div class="nav-label">Testing</div>
+      <a class="nav-item" href="/tests">
+        <span class="icon">\u26A1</span> Tests
+      </a>
+      <a class="nav-item" href="/coverage">
+        <span class="icon">\u{1F4C8}</span> Coverage
+      </a>
+      <a class="nav-item" href="/kanban">
+        <span class="icon">\u{1F4CB}</span> Kanban
+      </a>
 
-    .modal-body {
-      margin-bottom: 20px;
-      color: #4a5568;
-    }
+      <div class="nav-label">System</div>
+      <a class="nav-item" href="/config">
+        <span class="icon">\u2699\uFE0F</span> Config
+      </a>
+      <a class="nav-item active" href="/config/env">
+        <span class="icon">\u{1F527}</span> Environment
+      </a>
+      <a class="nav-item" href="/logs">
+        <span class="icon">\u{1F4DC}</span> Logs
+      </a>
+    </div>
 
-    .modal-footer {
-      display: flex;
-      gap: 10px;
-      justify-content: flex-end;
-    }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <div class="header">
-      <h1>
-        <span>\u2699\uFE0F</span>
+    <div class="sidebar-footer">
+      <div style="font-family:var(--mono);font-size:11px;color:var(--text-3);">
         Environment Variables
-      </h1>
-      <div class="header-actions">
-        <a href="/config" class="btn btn-secondary">\u2190 Back to Config</a>
-        <button id="saveBtn" class="btn btn-success" disabled>\u{1F4BE} Save Changes</button>
+      </div>
+    </div>
+  </aside>
+
+  <!-- Main -->
+  <main>
+    <div class="topbar">
+      <div>
+        <div class="page-title">Environment Variables</div>
+        <div class="page-sub">Configure runtime variables for OpenQA</div>
+      </div>
+      <div class="topbar-actions">
+        <a class="btn btn-ghost" href="/config">\u2190 Back to Config</a>
+        <button id="saveBtn" class="btn btn-primary" disabled>
+          \u{1F4BE} Save Changes
+        </button>
       </div>
     </div>
 
     <div class="content">
-      <div id="loading" class="loading">
+
+      <!-- Restart banner -->
+      <div class="restart-banner" id="restartBanner">
+        \u26A0\uFE0F Some changes require a server restart to take effect.
+      </div>
+
+      <!-- Loading -->
+      <div class="loading-state" id="loadingState">
         <div class="spinner"></div>
-        <div>Loading environment variables...</div>
+        Loading environment variables\u2026
       </div>
 
-      <div id="main" style="display: none;">
-        <div id="alerts"></div>
-
-        <div class="tabs">
-          <button class="tab active" data-category="llm">\u{1F916} LLM</button>
-          <button class="tab" data-category="security">\u{1F512} Security</button>
-          <button class="tab" data-category="target">\u{1F3AF} Target App</button>
-          <button class="tab" data-category="github">\u{1F419} GitHub</button>
-          <button class="tab" data-category="web">\u{1F310} Web Server</button>
-          <button class="tab" data-category="agent">\u{1F916} Agent</button>
-          <button class="tab" data-category="database">\u{1F4BE} Database</button>
-          <button class="tab" data-category="notifications">\u{1F514} Notifications</button>
-        </div>
+      <!-- Main content (hidden while loading) -->
+      <div id="mainContent" style="display:none;flex-direction:column;gap:24px;">
+
+        <!-- Tab bar -->
+        <div class="tab-bar" id="tabBar"></div>
+
+        <!-- Sections -->
+        <div id="sections"></div>
 
-        <div id="categories"></div>
       </div>
     </div>
-  </div>
+  </main>
+</div>
 
-  <!-- Test Result Modal -->
-  <div id="testModal" class="modal">
-    <div class="modal-content">
-      <div class="modal-header">Test Result</div>
-      <div class="modal-body" id="testResult"></div>
-      <div class="modal-footer">
-        <button class="btn btn-secondary" onclick="closeTestModal()">Close</button>
-      </div>
+<!-- Test result modal -->
+<div class="modal-backdrop" id="testModal">
+  <div class="modal">
+    <div class="modal-title">Connection Test</div>
+    <div class="modal-body">
+      <div class="modal-result" id="testResultBox">\u2026</div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn btn-ghost" onclick="closeModal()">Close</button>
     </div>
   </div>
+</div>
 
-  <script>
-    let envVariables = [];
-    let changedVariables = {};
-    let restartRequired = false;
+<!-- Toast zone -->
+<div class="toast-zone" id="toastZone"></div>
 
-    // Load environment variables
-    async function loadEnvVariables() {
-      try {
-        const response = await fetch('/api/env');
-        if (!response.ok) throw new Error('Failed to load variables');
-        
-        const data = await response.json();
-        envVariables = data.variables;
-        
-        renderCategories();
-        document.getElementById('loading').style.display = 'none';
-        document.getElementById('main').style.display = 'block';
-      } catch (error) {
-        showAlert('error', 'Failed to load environment variables: ' + error.message);
-      }
-    }
+<script>
+/* \u2500\u2500 State \u2500\u2500 */
+let envVars = [];
+let changed = {};
+let hasRequiredMissing = false;
+
+const TABS = [
+  { id: 'llm',           label: '\u{1F916} LLM',          desc: 'Language model provider & API keys' },
+  { id: 'security',      label: '\u{1F512} Security',      desc: 'Authentication & JWT configuration' },
+  { id: 'target',        label: '\u{1F3AF} Target App',    desc: 'Application under test settings' },
+  { id: 'github',        label: '\u{1F419} GitHub',        desc: 'Repository & CI/CD integration' },
+  { id: 'web',           label: '\u{1F310} Web Server',    desc: 'HTTP host, port & CORS settings' },
+  { id: 'agent',         label: '\u{1F916} Agent',         desc: 'Autonomous agent behaviour' },
+  { id: 'database',      label: '\u{1F4BE} Database',      desc: 'Persistence & storage' },
+  { id: 'notifications', label: '\u{1F514} Notifications', desc: 'Slack & Discord webhooks' },
+];
+
+/* \u2500\u2500 Init \u2500\u2500 */
+async function init() {
+  try {
+    const res = await fetch('/api/env');
+    if (!res.ok) { toast('error', 'Failed to load environment variables (status ' + res.status + ')'); return; }
+    const data = await res.json();
+    envVars = data.variables || [];
+    renderAll();
+    document.getElementById('loadingState').style.display = 'none';
+    const mc = document.getElementById('mainContent');
+    mc.style.display = 'flex';
+  } catch (e) {
+    toast('error', 'Network error \u2014 ' + e.message);
+  }
+}
 
-    // Render categories
-    function renderCategories() {
-      const container = document.getElementById('categories');
-      const categories = [...new Set(envVariables.map(v => v.category))];
-      
-      categories.forEach((category, index) => {
-        const section = document.createElement('div');
-        section.className = 'category-section' + (index === 0 ? ' active' : '');
-        section.dataset.category = category;
-        
-        const vars = envVariables.filter(v => v.category === category);
-        
-        section.innerHTML = \`
-          <div class="category-header">
-            <div class="category-title">\${getCategoryTitle(category)}</div>
-          </div>
-          <div class="env-grid">
-            \${vars.map(v => renderEnvItem(v)).join('')}
-          </div>
-        \`;
-        
-        container.appendChild(section);
-      });
-    }
+/* \u2500\u2500 Render \u2500\u2500 */
+function renderAll() {
+  renderTabBar();
+  renderSections();
+  activateTab(TABS[0].id);
+}
 
-    // Render single env item
-    function renderEnvItem(envVar) {
-      const inputType = envVar.type === 'password' ? 'password' : 'text';
-      const value = envVar.displayValue || '';
-      
-      return \`
-        <div class="env-item" data-key="\${envVar.key}">
-          <div class="env-item-header">
-            <div class="env-label">
-              \${envVar.key}
-              \${envVar.required ? '<span class="required-badge">REQUIRED</span>' : ''}
-            </div>
-          </div>
-          <div class="env-description">\${envVar.description}</div>
-          <div class="env-input-group">
-            \${envVar.type === 'select' ? 
-              \`<select class="env-input" data-key="\${envVar.key}" onchange="handleChange(this)">
-                <option value="">-- Select --</option>
-                \${envVar.options.map(opt => 
-                  \`<option value="\${opt}" \${value === opt ? 'selected' : ''}>\${opt}</option>\`
-                ).join('')}
-              </select>\` :
-              envVar.type === 'boolean' ?
-              \`<select class="env-input" data-key="\${envVar.key}" onchange="handleChange(this)">
-                <option value="">-- Select --</option>
-                <option value="true" \${value === 'true' ? 'selected' : ''}>true</option>
-                <option value="false" \${value === 'false' ? 'selected' : ''}>false</option>
-              </select>\` :
-              \`<input 
-                type="\${inputType}" 
-                class="env-input" 
-                data-key="\${envVar.key}"
-                value="\${value}"
-                placeholder="\${envVar.placeholder || ''}"
-                onchange="handleChange(this)"
-              />\`
-            }
-            <div class="env-actions">
-              \${envVar.testable ? \`<button class="icon-btn test" onclick="testVariable('\${envVar.key}')" title="Test">\u{1F9EA}</button>\` : ''}
-              \${envVar.key === 'OPENQA_JWT_SECRET' ? \`<button class="icon-btn generate" onclick="generateSecret('\${envVar.key}')" title="Generate">\u{1F511}</button>\` : ''}
-            </div>
-          </div>
-          <div class="error-message" id="error-\${envVar.key}"></div>
-          <div class="success-message" id="success-\${envVar.key}"></div>
+function renderTabBar() {
+  const bar = document.getElementById('tabBar');
+  bar.innerHTML = TABS.map(t => {
+    const vars = envVars.filter(v => v.category === t.id);
+    const hasRequired = vars.some(v => v.required);
+    return \`<button class="tab-btn\${hasRequired ? ' has-required' : ''}" data-tab="\${t.id}" onclick="activateTab('\${t.id}')">
+      <span class="tab-dot"></span>
+      \${t.label}
+    </button>\`;
+  }).join('');
+}
+
+function renderSections() {
+  const container = document.getElementById('sections');
+  container.innerHTML = TABS.map(t => {
+    const vars = envVars.filter(v => v.category === t.id);
+    return \`<div class="section" id="section-\${t.id}">
+      <div class="section-header">
+        <div class="section-icon">\${t.label.split(' ')[0]}</div>
+        <div>
+          <div class="section-title">\${t.label.slice(t.label.indexOf(' ')+1)}</div>
+          <div class="section-desc">\${t.desc}</div>
         </div>
-      \`;
-    }
+      </div>
+      \${vars.map(renderCard).join('')}
+      \${vars.length === 0 ? '<div style="color:var(--text-3);font-family:var(--mono);font-size:12px;padding:20px 0">No variables in this category.</div>' : ''}
+    </div>\`;
+  }).join('');
+}
 
-    // Handle input change
-    function handleChange(input) {
-      const key = input.dataset.key;
-      const value = input.value;
-      
-      changedVariables[key] = value;
-      document.getElementById('saveBtn').disabled = false;
-      
-      // Clear messages
-      document.getElementById(\`error-\${key}\`).textContent = '';
-      document.getElementById(\`success-\${key}\`).textContent = '';
-    }
+function renderCard(v) {
+  const displayVal = v.displayValue || '';
+  const isSensitive = v.sensitive;
+  const inputType = (v.type === 'password' && !changed[v.key]) ? 'password' : 'text';
+
+  let inputHTML = '';
+  if (v.type === 'select' || v.type === 'boolean') {
+    const opts = v.type === 'boolean'
+      ? [{ val: 'true', lbl: 'true' }, { val: 'false', lbl: 'false' }]
+      : (v.options || []).map(o => ({ val: o, lbl: o }));
+    inputHTML = \`<select class="env-select" data-key="\${v.key}" onchange="handleChange(this)">
+      <option value="">\u2014 Select \u2014</option>
+      \${opts.map(o => \`<option value="\${o.val}" \${displayVal === o.val ? 'selected' : ''}>\${o.lbl}</option>\`).join('')}
+    </select>\`;
+  } else {
+    inputHTML = \`<input
+      type="\${inputType}"
+      class="env-input"
+      data-key="\${v.key}"
+      value="\${escHtml(displayVal)}"
+      placeholder="\${escHtml(v.placeholder || '')}"
+      oninput="handleChange(this)"
+      autocomplete="off"
+    />\`;
+  }
 
-    // Save changes
-    async function saveChanges() {
-      const saveBtn = document.getElementById('saveBtn');
-      saveBtn.disabled = true;
-      saveBtn.textContent = '\u{1F4BE} Saving...';
-      
-      try {
-        const response = await fetch('/api/env/bulk', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ variables: changedVariables }),
-        });
-        
-        if (!response.ok) {
-          const error = await response.json();
-          throw new Error(error.error || 'Failed to save');
+  const testBtn = v.testable
+    ? \`<button class="env-action-btn test-btn" onclick="testVar('\${v.key}')" title="Test connection">\u{1F9EA}</button>\`
+    : '';
+
+  const genBtn = v.key === 'OPENQA_JWT_SECRET'
+    ? \`<button class="env-action-btn gen-btn" onclick="generateSecret('\${v.key}')" title="Generate secret">\u{1F511}</button>\`
+    : '';
+
+  const toggleBtn = (v.type === 'password' || isSensitive)
+    ? \`<button class="env-action-btn" onclick="toggleVis('\${v.key}')" title="Toggle visibility" id="vis-\${v.key}">\u{1F441}</button>\`
+    : '';
+
+  return \`<div class="env-card\${displayVal ? ' has-value' : ''}" id="card-\${v.key}">
+    <div class="env-card-head">
+      <div class="env-key">
+        \${v.key}
+        \${v.required ? '<span class="badge-required">Required</span>' : ''}
+        \${isSensitive ? '<span class="badge-sensitive">Sensitive</span>' : ''}
+      </div>
+    </div>
+    <div class="env-desc">\${v.description}</div>
+    <div class="env-input-row">
+      \${inputHTML}
+      \${toggleBtn}
+      \${testBtn}
+      \${genBtn}
+    </div>
+    <div class="env-feedback" id="fb-\${v.key}"></div>
+  </div>\`;
+}
+
+/* \u2500\u2500 Tab switching \u2500\u2500 */
+function activateTab(id) {
+  document.querySelectorAll('.tab-btn').forEach(b => b.classList.toggle('active', b.dataset.tab === id));
+  document.querySelectorAll('.section').forEach(s => s.classList.toggle('active', s.id === 'section-' + id));
+}
+
+/* \u2500\u2500 Input handling \u2500\u2500 */
+function handleChange(el) {
+  const key = el.dataset.key;
+  const val = el.value;
+  changed[key] = val;
+  el.classList.add('changed');
+  el.classList.remove('invalid');
+  clearFeedback(key);
+  document.getElementById('saveBtn').disabled = false;
+}
+
+/* \u2500\u2500 Toggle password visibility \u2500\u2500 */
+function toggleVis(key) {
+  const inp = document.querySelector('[data-key="' + key + '"]');
+  if (!inp || inp.tagName !== 'INPUT') return;
+  inp.type = inp.type === 'password' ? 'text' : 'password';
+}
+
+/* \u2500\u2500 Save \u2500\u2500 */
+async function saveChanges() {
+  if (!Object.keys(changed).length) return;
+
+  const btn = document.getElementById('saveBtn');
+  btn.disabled = true;
+  btn.textContent = '\u23F3 Saving\u2026';
+
+  try {
+    const res = await fetch('/api/env/bulk', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ variables: changed }),
+      credentials: 'include',
+    });
+
+    const body = await res.json().catch(() => ({}));
+
+    if (!res.ok) {
+      const errStr = body.errors
+        ? Object.entries(body.errors).map(([k, v]) => k + ': ' + v).join('; ')
+        : body.error || 'Failed to save';
+      // Show per-field errors
+      if (body.errors) {
+        for (const [k, msg] of Object.entries(body.errors)) {
+          setFeedback(k, 'error', msg);
+          const inp = document.querySelector('[data-key="' + k + '"]');
+          if (inp) inp.classList.add('invalid');
         }
-        
-        const result = await response.json();
-        restartRequired = result.restartRequired;
-        
-        showAlert('success', \`\u2705 Saved \${result.updated} variable(s) successfully!\` + 
-          (restartRequired ? ' \u26A0\uFE0F Restart required for changes to take effect.' : ''));
-        
-        changedVariables = {};
-        saveBtn.textContent = '\u{1F4BE} Save Changes';
-        
-        // Reload to show updated values
-        setTimeout(() => location.reload(), 2000);
-      } catch (error) {
-        showAlert('error', 'Failed to save: ' + error.message);
-        saveBtn.disabled = false;
-        saveBtn.textContent = '\u{1F4BE} Save Changes';
       }
+      toast('error', errStr);
+      btn.disabled = false;
+      btn.innerHTML = '\u{1F4BE} Save Changes';
+      return;
     }
 
-    // Test variable
-    async function testVariable(key) {
-      const input = document.querySelector(\`[data-key="\${key}"]\`);
-      const value = input.value;
-      
-      if (!value) {
-        showAlert('warning', 'Please enter a value first');
-        return;
-      }
-      
-      try {
-        const response = await fetch(\`/api/env/test/\${key}\`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ value }),
-        });
-        
-        const result = await response.json();
-        showTestResult(result);
-      } catch (error) {
-        showTestResult({ success: false, message: 'Test failed: ' + error.message });
-      }
+    toast('success', '\u2705 Saved ' + body.updated + ' variable(s)');
+    if (body.restartRequired) {
+      document.getElementById('restartBanner').classList.add('show');
     }
 
-    // Generate secret
-    async function generateSecret(key) {
-      try {
-        const response = await fetch(\`/api/env/generate/\${key}\`, {
-          method: 'POST',
-        });
-        
-        if (!response.ok) throw new Error('Failed to generate');
-        
-        const result = await response.json();
-        const input = document.querySelector(\`[data-key="\${key}"]\`);
-        input.value = result.value;
-        handleChange(input);
-        
-        document.getElementById(\`success-\${key}\`).textContent = '\u2705 Secret generated!';
-      } catch (error) {
-        document.getElementById(\`error-\${key}\`).textContent = 'Failed to generate: ' + error.message;
-      }
-    }
+    changed = {};
+    btn.innerHTML = '\u{1F4BE} Save Changes';
+    // Reload to reflect masked values
+    setTimeout(() => location.reload(), 1200);
+  } catch (e) {
+    toast('error', 'Network error \u2014 ' + e.message);
+    btn.disabled = false;
+    btn.innerHTML = '\u{1F4BE} Save Changes';
+  }
+}
 
-    // Show test result
-    function showTestResult(result) {
-      const modal = document.getElementById('testModal');
-      const resultDiv = document.getElementById('testResult');
-      
-      resultDiv.innerHTML = \`
-        <div class="alert \${result.success ? 'alert-success' : 'alert-warning'}">
-          \${result.success ? '\u2705' : '\u274C'} \${result.message}
-        </div>
-      \`;
-      
-      modal.classList.add('show');
-    }
+/* \u2500\u2500 Test variable \u2500\u2500 */
+async function testVar(key) {
+  const inp = document.querySelector('[data-key="' + key + '"]');
+  const val = inp ? inp.value : '';
+  if (!val) { toast('warning', 'Enter a value first'); return; }
 
-    function closeTestModal() {
-      document.getElementById('testModal').classList.remove('show');
-    }
+  setFeedback(key, '', '');
+  const btn = document.querySelector('[onclick="testVar(\\''+key+'\\')"]');
+  if (btn) { btn.textContent = '\u23F3'; btn.disabled = true; }
 
-    // Show alert
-    function showAlert(type, message) {
-      const alerts = document.getElementById('alerts');
-      const alertClass = type === 'error' ? 'alert-warning' : 
-                        type === 'success' ? 'alert-success' : 'alert-info';
-      
-      alerts.innerHTML = \`
-        <div class="alert \${alertClass}">
-          \${message}
-        </div>
-      \`;
-      
-      setTimeout(() => alerts.innerHTML = '', 5000);
-    }
-
-    // Get category title
-    function getCategoryTitle(category) {
-      const titles = {
-        llm: '\u{1F916} LLM Configuration',
-        security: '\u{1F512} Security Settings',
-        target: '\u{1F3AF} Target Application',
-        github: '\u{1F419} GitHub Integration',
-        web: '\u{1F310} Web Server',
-        agent: '\u{1F916} Agent Configuration',
-        database: '\u{1F4BE} Database',
-        notifications: '\u{1F514} Notifications',
-      };
-      return titles[category] || category;
-    }
-
-    // Tab switching
-    document.addEventListener('click', (e) => {
-      if (e.target.classList.contains('tab')) {
-        const category = e.target.dataset.category;
-        
-        document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
-        e.target.classList.add('active');
-        
-        document.querySelectorAll('.category-section').forEach(s => s.classList.remove('active'));
-        document.querySelector(\`[data-category="\${category}"]\`).classList.add('active');
-      }
+  try {
+    const res = await fetch('/api/env/test/' + key, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ value: val }),
+      credentials: 'include',
     });
+    const result = await res.json();
+    openModal(result.success, result.message);
+    setFeedback(key, result.success ? 'success' : 'error', result.success ? '\u2713 Connected' : '\u2717 ' + result.message);
+  } catch (e) {
+    openModal(false, 'Network error: ' + e.message);
+  } finally {
+    if (btn) { btn.textContent = '\u{1F9EA}'; btn.disabled = false; }
+  }
+}
+
+/* \u2500\u2500 Generate secret \u2500\u2500 */
+async function generateSecret(key) {
+  try {
+    const res = await fetch('/api/env/generate/' + key, {
+      method: 'POST', credentials: 'include'
+    });
+    if (!res.ok) throw new Error('Failed to generate');
+    const { value } = await res.json();
+    const inp = document.querySelector('[data-key="' + key + '"]');
+    if (inp) {
+      inp.type = 'text';
+      inp.value = value;
+      handleChange(inp);
+    }
+    setFeedback(key, 'success', '\u2713 Secret generated \u2014 save to persist');
+  } catch (e) {
+    setFeedback(key, 'error', e.message);
+  }
+}
+
+/* \u2500\u2500 Modal \u2500\u2500 */
+function openModal(ok, msg) {
+  const box = document.getElementById('testResultBox');
+  box.className = 'modal-result ' + (ok ? 'ok' : 'fail');
+  box.textContent = (ok ? '\u2713 ' : '\u2717 ') + msg;
+  document.getElementById('testModal').classList.add('open');
+}
+function closeModal() {
+  document.getElementById('testModal').classList.remove('open');
+}
 
-    // Save button
-    document.getElementById('saveBtn').addEventListener('click', saveChanges);
+/* \u2500\u2500 Toast \u2500\u2500 */
+function toast(type, msg) {
+  const zone = document.getElementById('toastZone');
+  const el = document.createElement('div');
+  el.className = 'toast ' + type;
+  el.textContent = msg;
+  zone.appendChild(el);
+  setTimeout(() => el.remove(), 4500);
+}
 
-    // Load on page load
-    loadEnvVariables();
-  </script>
+/* \u2500\u2500 Feedback \u2500\u2500 */
+function setFeedback(key, type, msg) {
+  const el = document.getElementById('fb-' + key);
+  if (!el) return;
+  el.className = 'env-feedback' + (type ? ' ' + type : '');
+  el.textContent = msg;
+}
+function clearFeedback(key) { setFeedback(key, '', ''); }
+
+/* \u2500\u2500 Helpers \u2500\u2500 */
+function escHtml(s) {
+  return String(s).replace(/[&<>"']/g, c => ({ '&':'&amp;', '<':'&lt;', '>':'&gt;', '"':'&quot;', "'":'&#39;' }[c]));
+}
+
+/* \u2500\u2500 Wire save button \u2500\u2500 */
+document.getElementById('saveBtn').addEventListener('click', saveChanges);
+
+/* \u2500\u2500 Close modal on backdrop click \u2500\u2500 */
+document.getElementById('testModal').addEventListener('click', function(e) {
+  if (e.target === this) closeModal();
+});
+
+/* \u2500\u2500 Boot \u2500\u2500 */
+init();
+</script>
 </body>
 </html>`;
 }