@openqa/cli 2.1.1 → 2.1.3

package/dist/cli/daemon.js

@@ -861,9 +861,9 @@ function createQuickConfig(name, description, url, options) {
 // agent/brain/index.ts
 init_esm_shims();
 import { EventEmitter as EventEmitter2 } from "events";
-import { writeFileSync as writeFileSync2, readFileSync as readFileSync3, existsSync as existsSync2, mkdirSync as mkdirSync2 } from "fs";
-import { join as join3 } from "path";
-import { execSync } from "child_process";
+import { writeFileSync as writeFileSync2, readFileSync as readFileSync3, existsSync as existsSync3, mkdirSync as mkdirSync2 } from "fs";
+import { join as join4 } from "path";
+import { execSync as execSync2 } from "child_process";
 
 // agent/brain/llm-resilience.ts
 init_esm_shims();
@@ -1101,10 +1101,150 @@ var ResilientLLM = class extends EventEmitter {
   }
 };
 
+// agent/brain/diff-analyzer.ts
+init_esm_shims();
+import { execSync } from "child_process";
+import { existsSync as existsSync2 } from "fs";
+import { join as join3, basename, dirname as dirname2 } from "path";
+var DiffAnalyzer = class {
+  /**
+   * Get files changed between current branch and base branch
+   */
+  getChangedFiles(repoPath, baseBranch = "main") {
+    try {
+      const output = execSync(`git diff --name-only ${baseBranch}...HEAD`, {
+        cwd: repoPath,
+        stdio: "pipe"
+      }).toString().trim();
+      if (!output) return [];
+      return output.split("\n").filter(Boolean);
+    } catch {
+      try {
+        const output = execSync("git diff --name-only HEAD~1", {
+          cwd: repoPath,
+          stdio: "pipe"
+        }).toString().trim();
+        if (!output) return [];
+        return output.split("\n").filter(Boolean);
+      } catch {
+        return [];
+      }
+    }
+  }
+  /**
+   * Map changed source files to their likely test files
+   */
+  mapFilesToTests(changedFiles, repoPath) {
+    const testFiles = /* @__PURE__ */ new Set();
+    for (const file of changedFiles) {
+      if (!this.isSourceFile(file)) continue;
+      const candidates = this.getTestCandidates(file);
+      for (const candidate of candidates) {
+        if (existsSync2(join3(repoPath, candidate))) {
+          testFiles.add(candidate);
+        }
+      }
+    }
+    for (const file of changedFiles) {
+      if (this.isTestFile(file)) {
+        testFiles.add(file);
+      }
+    }
+    return Array.from(testFiles);
+  }
+  /**
+   * Analyze a diff and return risk assessment + affected tests
+   */
+  analyze(repoPath, baseBranch = "main") {
+    const changedFiles = this.getChangedFiles(repoPath, baseBranch);
+    const affectedTests = this.mapFilesToTests(changedFiles, repoPath);
+    const riskLevel = this.assessRisk(changedFiles);
+    const summary = this.buildSummary(changedFiles, affectedTests, riskLevel);
+    return { changedFiles, affectedTests, riskLevel, summary };
+  }
+  getTestCandidates(filePath) {
+    const dir = dirname2(filePath);
+    const base = basename(filePath);
+    const candidates = [];
+    const nameMatch = base.match(/^(.+)\.(tsx?|jsx?|vue|svelte|py|go|rs)$/);
+    if (!nameMatch) return candidates;
+    const name = nameMatch[1];
+    const ext = nameMatch[2];
+    const testExts = ext.startsWith("ts") ? ["test.ts", "test.tsx", "spec.ts", "spec.tsx"] : ext.startsWith("js") ? ["test.js", "test.jsx", "spec.js", "spec.jsx"] : ext === "py" ? ["test.py"] : ext === "go" ? ["_test.go"] : [];
+    for (const testExt of testExts) {
+      candidates.push(join3(dir, `${name}.${testExt}`));
+      candidates.push(join3(dir, "__tests__", `${name}.${testExt}`));
+      candidates.push(join3(dir, "test", `${name}.${testExt}`));
+      candidates.push(join3(dir, "tests", `${name}.${testExt}`));
+      candidates.push(join3("__tests__", dir, `${name}.${testExt}`));
+    }
+    if (ext === "go") {
+      candidates.push(join3(dir, `${name}_test.go`));
+    }
+    return candidates;
+  }
+  isSourceFile(file) {
+    return /\.(tsx?|jsx?|vue|svelte|py|go|rs)$/.test(file) && !this.isTestFile(file);
+  }
+  isTestFile(file) {
+    return /\.(test|spec)\.(tsx?|jsx?|py)$/.test(file) || /_test\.go$/.test(file) || file.includes("__tests__/");
+  }
+  assessRisk(changedFiles) {
+    const highRiskPatterns = [
+      /auth/i,
+      /security/i,
+      /middleware/i,
+      /database/i,
+      /migration/i,
+      /config/i,
+      /\.env/,
+      /package\.json$/,
+      /docker/i,
+      /ci\//i,
+      /payment/i,
+      /billing/i,
+      /permission/i
+    ];
+    const mediumRiskPatterns = [
+      /api/i,
+      /route/i,
+      /controller/i,
+      /service/i,
+      /model/i,
+      /hook/i,
+      /context/i,
+      /store/i,
+      /util/i
+    ];
+    let highCount = 0;
+    let mediumCount = 0;
+    for (const file of changedFiles) {
+      if (highRiskPatterns.some((p) => p.test(file))) highCount++;
+      else if (mediumRiskPatterns.some((p) => p.test(file))) mediumCount++;
+    }
+    if (highCount >= 2 || highCount >= 1 && changedFiles.length > 5) return "high";
+    if (highCount >= 1 || mediumCount >= 3) return "medium";
+    return "low";
+  }
+  buildSummary(changedFiles, affectedTests, riskLevel) {
+    const lines = [];
+    lines.push(`${changedFiles.length} file(s) changed, ${affectedTests.length} test(s) affected.`);
+    lines.push(`Risk level: ${riskLevel}.`);
+    if (affectedTests.length > 0) {
+      lines.push(`Run: ${affectedTests.slice(0, 5).join(", ")}${affectedTests.length > 5 ? ` (+${affectedTests.length - 5} more)` : ""}`);
+    } else if (changedFiles.length > 0) {
+      lines.push("No matching test files found \u2014 consider running full suite.");
+    }
+    return lines.join(" ");
+  }
+};
+
 // agent/brain/index.ts
 var OpenQABrain = class extends EventEmitter2 {
   db;
   llm;
+  cache = new LLMCache();
+  diffAnalyzer = new DiffAnalyzer();
   saasConfig;
   generatedTests = /* @__PURE__ */ new Map();
   dynamicAgents = /* @__PURE__ */ new Map();
@@ -1165,7 +1305,9 @@ Respond in JSON format:
   "suggestedAgents": ["Agent for X", "Agent for Y"],
   "risks": ["Risk 1", "Risk 2"]
 }`;
-    const response = await this.llm.generate(prompt);
+    const cached = this.cache.get(prompt);
+    const response = cached ?? await this.llm.generate(prompt);
+    if (!cached) this.cache.set(prompt, response);
     try {
       const jsonMatch = response.match(/\{[\s\S]*\}/);
       if (jsonMatch) {
@@ -1184,11 +1326,11 @@ Respond in JSON format:
   async analyzeCodebase() {
     let repoPath = this.saasConfig.localPath;
     if (this.saasConfig.repoUrl && !this.saasConfig.localPath) {
-      repoPath = join3(this.workDir, "repo");
-      if (!existsSync2(repoPath)) {
+      repoPath = join4(this.workDir, "repo");
+      if (!existsSync3(repoPath)) {
         logger.info("Cloning repository", { url: this.saasConfig.repoUrl });
         try {
-          execSync(`git clone --depth 1 ${this.saasConfig.repoUrl} ${repoPath}`, {
+          execSync2(`git clone --depth 1 ${this.saasConfig.repoUrl} ${repoPath}`, {
             stdio: "pipe"
           });
         } catch (e) {
@@ -1197,13 +1339,13 @@ Respond in JSON format:
         }
       }
     }
-    if (!repoPath || !existsSync2(repoPath)) {
+    if (!repoPath || !existsSync3(repoPath)) {
       return "";
     }
     const analysis = [];
     try {
-      const packageJsonPath = join3(repoPath, "package.json");
-      if (existsSync2(packageJsonPath)) {
+      const packageJsonPath = join4(repoPath, "package.json");
+      if (existsSync3(packageJsonPath)) {
         const pkg = JSON.parse(readFileSync3(packageJsonPath, "utf-8"));
         analysis.push(`### Package Info`);
         analysis.push(`- Name: ${pkg.name}`);
@@ -1228,8 +1370,8 @@ Respond in JSON format:
       }
       const routePatterns = ["routes", "pages", "views", "controllers", "api"];
       for (const pattern of routePatterns) {
-        const routeDir = join3(repoPath, "src", pattern);
-        if (existsSync2(routeDir)) {
+        const routeDir = join4(repoPath, "src", pattern);
+        if (existsSync3(routeDir)) {
           const routes = this.findFiles(routeDir, [".ts", ".tsx", ".js", ".jsx"], 20);
           if (routes.length > 0) {
             analysis.push(`
@@ -1256,7 +1398,7 @@ Respond in JSON format:
         for (const item of items) {
           if (results.length >= limit) return;
           if (item.startsWith(".") || item === "node_modules" || item === "dist" || item === "build") continue;
-          const fullPath = join3(d, item);
+          const fullPath = join4(d, item);
           const stat = statSync2(fullPath);
           if (stat.isDirectory()) {
             find(fullPath);
@@ -1302,7 +1444,9 @@ Respond with JSON:
   "code": "// complete test code here",
   "priority": 1-5
 }`;
-    const response = await this.llm.generate(prompt);
+    const cached2 = this.cache.get(prompt);
+    const response = cached2 ?? await this.llm.generate(prompt);
+    if (!cached2) this.cache.set(prompt, response);
     let testData = { name: target, description: "", code: "", priority: 3 };
     try {
       const jsonMatch = response.match(/\{[\s\S]*\}/);
@@ -1329,7 +1473,7 @@ Respond with JSON:
   }
   saveTest(test) {
     const filename = `${test.type}_${test.id}.ts`;
-    const filepath = join3(this.testsDir, filename);
+    const filepath = join4(this.testsDir, filename);
     const content = `/**
  * Generated by OpenQA
  * Type: ${test.type}
@@ -1367,7 +1511,9 @@ Respond with JSON:
   "prompt": "Complete system prompt for this agent (be specific and detailed)",
   "tools": ["tool1", "tool2"] // from: navigate, click, fill, screenshot, check_console, create_issue, create_ticket
 }`;
-    const response = await this.llm.generate(prompt);
+    const cached3 = this.cache.get(prompt);
+    const response = cached3 ?? await this.llm.generate(prompt);
+    if (!cached3) this.cache.set(prompt, response);
     let agentData = { name: purpose, purpose, prompt: "", tools: [] };
     try {
       const jsonMatch = response.match(/\{[\s\S]*\}/);
@@ -1398,8 +1544,8 @@ Respond with JSON:
     test.executedAt = /* @__PURE__ */ new Date();
     this.emit("test-started", test);
     try {
-      if (test.targetFile && existsSync2(test.targetFile)) {
-        const result = execSync(`npx playwright test ${test.targetFile} --reporter=json`, {
+      if (test.targetFile && existsSync3(test.targetFile)) {
+        const result = execSync2(`npx playwright test ${test.targetFile} --reporter=json`, {
           cwd: this.testsDir,
           stdio: "pipe",
           timeout: 12e4
@@ -1453,7 +1599,9 @@ Respond with JSON:
     { "type": "analyze", "target": "what to analyze", "reason": "why" }
   ]
 }`;
-    const response = await this.llm.generate(prompt);
+    const cached4 = this.cache.get(prompt);
+    const response = cached4 ?? await this.llm.generate(prompt);
+    if (!cached4) this.cache.set(prompt, response);
     try {
       const jsonMatch = response.match(/\{[\s\S]*\}/);
       if (jsonMatch) {
@@ -1545,13 +1693,50 @@ Respond with JSON:
       }
     };
   }
+  /**
+   * B8 — Incremental mode: only generate tests for files changed vs baseBranch.
+   * Emits 'diff-analyzed' with the DiffResult, then runs autonomously with a reduced
+   * scope derived from the changed files.
+   */
+  async runIncrementally(baseBranch = "main") {
+    const repoPath = this.saasConfig.localPath;
+    if (!repoPath) {
+      logger.warn("runIncrementally: no localPath configured, falling back to full run");
+      return this.runAutonomously();
+    }
+    const diff = this.diffAnalyzer.analyze(repoPath, baseBranch);
+    logger.info("Incremental diff", { changedFiles: diff.changedFiles.length, affectedTests: diff.affectedTests.length, riskLevel: diff.riskLevel });
+    this.emit("diff-analyzed", diff);
+    if (diff.changedFiles.length === 0) {
+      logger.info("No changed files \u2014 skipping incremental run");
+      this.emit("session-complete", { testsGenerated: 0, agentsCreated: 0, incremental: true });
+      return;
+    }
+    for (const file of diff.changedFiles.slice(0, 10)) {
+      const testType = this.inferTestType(file);
+      const context = `Changed file: ${file}
+Risk level: ${diff.riskLevel}
+${diff.summary}`;
+      try {
+        await this.generateTest(testType, `Test coverage for ${file}`, context);
+      } catch (e) {
+        logger.error("Failed to generate test for file", { file, error: e instanceof Error ? e.message : String(e) });
+      }
+    }
+    this.emit("session-complete", {
+      testsGenerated: this.generatedTests.size,
+      agentsCreated: this.dynamicAgents.size,
+      incremental: true,
+      diff
+    });
+  }
 };
 
 // agent/tools/browser.ts
 init_esm_shims();
 import { chromium } from "playwright";
 import { mkdirSync as mkdirSync3 } from "fs";
-import { join as join4 } from "path";
+import { join as join5 } from "path";
 var BrowserTools = class {
   browser = null;
   page = null;
@@ -1652,7 +1837,7 @@ var BrowserTools = class {
           if (!this.page) return { output: "Browser not initialized. Navigate to a page first.", error: "Browser not initialized" };
           try {
             const filename = `${Date.now()}_${name}.png`;
-            const path2 = join4(this.screenshotDir, filename);
+            const path2 = join5(this.screenshotDir, filename);
             await this.page.screenshot({ path: path2, fullPage: true });
             this.db.createAction({
               session_id: this.sessionId,
@@ -1808,6 +1993,16 @@ var GitListener = class extends EventEmitter3 {
     for (const commit of commits) {
       if (this.lastCommitSha && commit.sha === this.lastCommitSha) break;
       const isMerge = commit.parents && commit.parents.length > 1;
+      let changedFiles;
+      try {
+        const { data: detail } = await this.octokit.repos.getCommit({
+          owner: this.config.owner,
+          repo: this.config.repo,
+          ref: commit.sha
+        });
+        changedFiles = (detail.files ?? []).map((f) => f.filename);
+      } catch {
+      }
       const event = {
         type: isMerge ? "merge" : "push",
         provider: "github",
@@ -1815,7 +2010,8 @@ var GitListener = class extends EventEmitter3 {
         commit: commit.sha,
         author: commit.commit.author?.name || "unknown",
         message: commit.commit.message,
-        timestamp: new Date(commit.commit.author?.date || Date.now())
+        timestamp: new Date(commit.commit.author?.date || Date.now()),
+        changedFiles
       };
       this.emit("git-event", event);
       if (isMerge) {
@@ -1901,6 +2097,16 @@ var GitListener = class extends EventEmitter3 {
       for (const commit of commits) {
         if (this.lastCommitSha && commit.id === this.lastCommitSha) break;
         const isMerge = commit.parent_ids && commit.parent_ids.length > 1;
+        let changedFiles;
+        try {
+          const diffRes = await fetch(
+            `${baseUrl}/api/v4/projects/${projectPath}/repository/commits/${commit.id}/diff`,
+            { headers }
+          );
+          const diffs = await diffRes.json();
+          changedFiles = diffs.map((d) => d.new_path);
+        } catch {
+        }
         const event = {
           type: isMerge ? "merge" : "push",
           provider: "gitlab",
@@ -1908,7 +2114,8 @@ var GitListener = class extends EventEmitter3 {
           commit: commit.id,
           author: commit.author_name,
           message: commit.message,
-          timestamp: new Date(commit.created_at)
+          timestamp: new Date(commit.created_at),
+          changedFiles
         };
         this.emit("git-event", event);
         if (isMerge) {
@@ -2003,8 +2210,8 @@ var GitListener = class extends EventEmitter3 {
 init_esm_shims();
 import { EventEmitter as EventEmitter4 } from "events";
 import { spawn } from "child_process";
-import { existsSync as existsSync3, readFileSync as readFileSync4, statSync } from "fs";
-import { join as join5, resolve } from "path";
+import { existsSync as existsSync4, readFileSync as readFileSync4, statSync } from "fs";
+import { join as join6, resolve } from "path";
 function sanitizeRepoPath(inputPath) {
   if (typeof inputPath !== "string" || !inputPath.trim()) {
     throw new ProjectRunnerError("repoPath must be a non-empty string");
@@ -2032,14 +2239,14 @@ var ProjectRunner = class extends EventEmitter4 {
    */
   detectProjectType(repoPath) {
     repoPath = sanitizeRepoPath(repoPath);
-    const pkgPath = join5(repoPath, "package.json");
-    if (existsSync3(pkgPath)) {
+    const pkgPath = join6(repoPath, "package.json");
+    if (existsSync4(pkgPath)) {
       return this.detectNodeProject(repoPath, pkgPath);
     }
-    if (existsSync3(join5(repoPath, "requirements.txt")) || existsSync3(join5(repoPath, "pyproject.toml"))) {
+    if (existsSync4(join6(repoPath, "requirements.txt")) || existsSync4(join6(repoPath, "pyproject.toml"))) {
       return this.detectPythonProject(repoPath);
     }
-    if (existsSync3(join5(repoPath, "go.mod"))) {
+    if (existsSync4(join6(repoPath, "go.mod"))) {
       return {
         language: "go",
         packageManager: "go",
@@ -2048,7 +2255,7 @@ var ProjectRunner = class extends EventEmitter4 {
         devCommand: "go run ."
       };
     }
-    if (existsSync3(join5(repoPath, "Cargo.toml"))) {
+    if (existsSync4(join6(repoPath, "Cargo.toml"))) {
       return {
         language: "rust",
         packageManager: "cargo",
@@ -2064,9 +2271,9 @@ var ProjectRunner = class extends EventEmitter4 {
     const scripts = pkg.scripts || {};
     const deps = { ...pkg.dependencies, ...pkg.devDependencies };
     let packageManager = "npm";
-    if (existsSync3(join5(repoPath, "pnpm-lock.yaml"))) packageManager = "pnpm";
-    else if (existsSync3(join5(repoPath, "yarn.lock"))) packageManager = "yarn";
-    else if (existsSync3(join5(repoPath, "bun.lockb"))) packageManager = "bun";
+    if (existsSync4(join6(repoPath, "pnpm-lock.yaml"))) packageManager = "pnpm";
+    else if (existsSync4(join6(repoPath, "yarn.lock"))) packageManager = "yarn";
+    else if (existsSync4(join6(repoPath, "bun.lockb"))) packageManager = "bun";
     let framework;
     if (deps["next"]) framework = "next";
     else if (deps["nuxt"]) framework = "nuxt";
@@ -2118,13 +2325,13 @@ var ProjectRunner = class extends EventEmitter4 {
   }
   detectPythonProject(repoPath) {
     let testRunner;
-    const reqPath = join5(repoPath, "requirements.txt");
-    if (existsSync3(reqPath)) {
+    const reqPath = join6(repoPath, "requirements.txt");
+    if (existsSync4(reqPath)) {
       const content = readFileSync4(reqPath, "utf-8");
       if (content.includes("pytest")) testRunner = "pytest";
     }
-    const pyprojectPath = join5(repoPath, "pyproject.toml");
-    if (existsSync3(pyprojectPath)) {
+    const pyprojectPath = join6(repoPath, "pyproject.toml");
+    if (existsSync4(pyprojectPath)) {
       const content = readFileSync4(pyprojectPath, "utf-8");
       if (content.includes("pytest")) testRunner = "pytest";
     }
@@ -3909,8 +4116,8 @@ function createAuthRouter(db2) {
 // cli/env-routes.ts
 init_esm_shims();
 import { Router as Router3 } from "express";
-import { readFileSync as readFileSync5, writeFileSync as writeFileSync3, existsSync as existsSync4 } from "fs";
-import { join as join6 } from "path";
+import { readFileSync as readFileSync5, writeFileSync as writeFileSync3, existsSync as existsSync5 } from "fs";
+import { join as join7 } from "path";
 
 // cli/env-config.ts
 init_esm_shims();
@@ -4299,9 +4506,9 @@ function validateEnvValue(key, value) {
 // cli/env-routes.ts
 function createEnvRouter() {
   const router = Router3();
-  const ENV_FILE_PATH = join6(process.cwd(), ".env");
+  const ENV_FILE_PATH = join7(process.cwd(), ".env");
   function readEnvFile() {
-    if (!existsSync4(ENV_FILE_PATH)) {
+    if (!existsSync5(ENV_FILE_PATH)) {
       return {};
     }
     const content = readFileSync5(ENV_FILE_PATH, "utf-8");
@@ -4376,8 +4583,8 @@ function createEnvRouter() {
       }));
       res.json({
         variables,
-        envFileExists: existsSync4(ENV_FILE_PATH),
-        lastModified: existsSync4(ENV_FILE_PATH) ? new Date(readFileSync5(ENV_FILE_PATH, "utf-8").match(/Last updated: (.+)/)?.[1] || 0).toISOString() : null
+        envFileExists: existsSync5(ENV_FILE_PATH),
+        lastModified: existsSync5(ENV_FILE_PATH) ? new Date(readFileSync5(ENV_FILE_PATH, "utf-8").match(/Last updated: (.+)/)?.[1] || 0).toISOString() : null
       });
     } catch (error) {
       res.status(500).json({
@@ -7736,672 +7943,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;
-      border-radius: 4px;
+    .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;
+    @keyframes slideIn {
+      from { opacity: 0; transform: translateY(8px); }
+      to { opacity: 1; transform: translateY(0); }
     }
 
-    .alert-info {
-      background: #eff6ff;
-      border-left: 4px solid #3b82f6;
-      color: #1e40af;
-    }
-
-    .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' },
+];
 
-    // 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 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 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>
+/* \u2500\u2500 Render \u2500\u2500 */
+function renderAll() {
+  renderTabBar();
+  renderSections();
+  activateTab(TABS[0].id);
+}
+
+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"
+    />\`;
+  }
+
+  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>\`;
+}
 
-    // 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');
+/* \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);
+  }
+}
 
-    // Save button
-    document.getElementById('saveBtn').addEventListener('click', saveChanges);
+/* \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');
+}
 
-    // Load on page load
-    loadEnvVariables();
-  </script>
+/* \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);
+}
+
+/* \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>`;
 }