@openqa/cli 2.0.0 → 2.1.1

package/dist/cli/server.js

@@ -1468,6 +1468,1049 @@ function createApiRouter(db, config) {
   return router;
 }
 
+// cli/auth/router.ts
+init_esm_shims();
+import { Router as Router2 } from "express";
+import { z as z3 } from "zod";
+
+// cli/auth/passwords.ts
+init_esm_shims();
+import { scrypt, randomBytes, timingSafeEqual } from "crypto";
+import { promisify } from "util";
+var scryptAsync = promisify(scrypt);
+var KEYLEN = 64;
+async function hashPassword(plain) {
+  const salt = randomBytes(16).toString("hex");
+  const hash = await scryptAsync(plain, salt, KEYLEN);
+  return `$scrypt$${salt}$${hash.toString("hex")}`;
+}
+async function verifyPassword(plain, stored) {
+  const parts = stored.split("$");
+  if (parts.length !== 4 || parts[1] !== "scrypt") return false;
+  const [, , salt, hashHex] = parts;
+  const storedHash = Buffer.from(hashHex, "hex");
+  const derived = await scryptAsync(plain, salt, KEYLEN);
+  if (derived.length !== storedHash.length) return false;
+  return timingSafeEqual(derived, storedHash);
+}
+
+// cli/auth/jwt.ts
+init_esm_shims();
+import { createHmac, randomBytes as randomBytes2 } from "crypto";
+import { parse as parseCookies } from "cookie";
+var TTL_MS = 24 * 60 * 60 * 1e3;
+var COOKIE_NAME = "openqa_token";
+var _secret = null;
+function getSecret() {
+  if (_secret) return _secret;
+  _secret = process.env.OPENQA_JWT_SECRET ?? null;
+  if (!_secret) {
+    _secret = randomBytes2(32).toString("hex");
+    console.warn("[OpenQA] OPENQA_JWT_SECRET not set \u2014 using a volatile secret. All sessions will be invalidated on restart.");
+  }
+  return _secret;
+}
+function b64url(input) {
+  return Buffer.from(input).toString("base64url");
+}
+function fromB64url(input) {
+  return Buffer.from(input, "base64url").toString("utf8");
+}
+function signToken(payload) {
+  const now = Math.floor(Date.now() / 1e3);
+  const full = { ...payload, iat: now, exp: now + Math.floor(TTL_MS / 1e3) };
+  const header = b64url(JSON.stringify({ alg: "HS256", typ: "JWT" }));
+  const body = b64url(JSON.stringify(full));
+  const sig = createHmac("sha256", getSecret()).update(`${header}.${body}`).digest("base64url");
+  return `${header}.${body}.${sig}`;
+}
+function verifyToken(token) {
+  try {
+    const [header, body, sig] = token.split(".");
+    if (!header || !body || !sig) return null;
+    const expected = createHmac("sha256", getSecret()).update(`${header}.${body}`).digest("base64url");
+    if (expected !== sig) return null;
+    const payload = JSON.parse(fromB64url(body));
+    if (payload.exp < Math.floor(Date.now() / 1e3)) return null;
+    return payload;
+  } catch {
+    return null;
+  }
+}
+function setAuthCookie(res, token) {
+  res.cookie(COOKIE_NAME, token, {
+    httpOnly: true,
+    sameSite: "lax",
+    secure: process.env.NODE_ENV === "production",
+    maxAge: TTL_MS,
+    path: "/"
+  });
+}
+function clearAuthCookie(res) {
+  res.clearCookie(COOKIE_NAME, { path: "/" });
+}
+function extractToken(req) {
+  const cookieHeader = req.headers.cookie ?? "";
+  if (cookieHeader) {
+    const cookies = parseCookies(cookieHeader);
+    if (cookies[COOKIE_NAME]) return cookies[COOKIE_NAME];
+  }
+  const auth = req.headers.authorization ?? "";
+  if (auth.startsWith("Bearer ")) return auth.slice(7);
+  return null;
+}
+
+// cli/auth/middleware.ts
+init_esm_shims();
+var AUTH_DISABLED = process.env.OPENQA_AUTH_DISABLED === "true";
+function requireAuth(req, res, next) {
+  if (AUTH_DISABLED) {
+    req.user = { sub: "dev", username: "dev", role: "admin", iat: 0, exp: 0 };
+    return next();
+  }
+  const token = extractToken(req);
+  const payload = token ? verifyToken(token) : null;
+  if (!payload) {
+    res.status(401).json({ error: "Unauthorized" });
+    return;
+  }
+  req.user = payload;
+  next();
+}
+function requireAdmin(req, res, next) {
+  const user = req.user;
+  if (!user || user.role !== "admin") {
+    res.status(403).json({ error: "Forbidden \u2014 admin only" });
+    return;
+  }
+  next();
+}
+function authOrRedirect(db) {
+  return async (req, res, next) => {
+    if (AUTH_DISABLED) return next();
+    const token = extractToken(req);
+    const payload = token ? verifyToken(token) : null;
+    if (payload) {
+      req.user = payload;
+      return next();
+    }
+    const count = await db.countUsers();
+    if (count === 0) {
+      res.redirect("/setup");
+    } else {
+      res.redirect("/login");
+    }
+  };
+}
+
+// cli/auth/router.ts
+function validate2(schema) {
+  return (req, res, next) => {
+    const r = schema.safeParse(req.body);
+    if (!r.success) {
+      res.status(400).json({ error: r.error.issues.map((i) => `${i.path.join(".")}: ${i.message}`).join(", ") });
+      return;
+    }
+    req.body = r.data;
+    next();
+  };
+}
+var loginSchema = z3.object({
+  username: z3.string().min(1).max(100),
+  password: z3.string().min(1).max(200)
+});
+var setupSchema = z3.object({
+  username: z3.string().min(3).max(100).regex(/^[a-z0-9_.@-]+$/, "Only lowercase letters, digits, and ._@- characters"),
+  password: z3.string().min(8).max(200)
+});
+var changePasswordSchema = z3.object({
+  currentPassword: z3.string().min(1),
+  newPassword: z3.string().min(8).max(200)
+});
+var createUserSchema = z3.object({
+  username: z3.string().min(3).max(100).regex(/^[a-z0-9_.@-]+$/, "Only lowercase letters, digits, and ._@- characters"),
+  password: z3.string().min(8).max(200),
+  role: z3.enum(["admin", "viewer"])
+});
+var updateUserSchema = z3.object({
+  role: z3.enum(["admin", "viewer"]).optional(),
+  password: z3.string().min(8).max(200).optional()
+});
+function createAuthRouter(db) {
+  const router = Router2();
+  router.post("/api/auth/login", validate2(loginSchema), async (req, res) => {
+    const { username, password } = req.body;
+    const user = await db.findUserByUsername(username);
+    if (!user) {
+      res.status(401).json({ error: "Invalid credentials" });
+      return;
+    }
+    const ok = await verifyPassword(password, user.passwordHash);
+    if (!ok) {
+      res.status(401).json({ error: "Invalid credentials" });
+      return;
+    }
+    const token = signToken({ sub: user.id, username: user.username, role: user.role });
+    setAuthCookie(res, token);
+    res.json({ token, user: { id: user.id, username: user.username, role: user.role } });
+  });
+  router.post("/api/auth/logout", (_req, res) => {
+    clearAuthCookie(res);
+    res.json({ success: true });
+  });
+  router.get("/api/auth/me", requireAuth, (req, res) => {
+    const { sub, username, role } = req.user;
+    res.json({ id: sub, username, role });
+  });
+  router.post("/api/auth/change-password", requireAuth, validate2(changePasswordSchema), async (req, res) => {
+    const { currentPassword, newPassword } = req.body;
+    const userId = req.user.sub;
+    const user = await db.getUserById(userId);
+    if (!user) {
+      res.status(404).json({ error: "User not found" });
+      return;
+    }
+    const ok = await verifyPassword(currentPassword, user.passwordHash);
+    if (!ok) {
+      res.status(401).json({ error: "Current password is incorrect" });
+      return;
+    }
+    const passwordHash = await hashPassword(newPassword);
+    await db.updateUser(userId, { passwordHash });
+    res.json({ success: true });
+  });
+  router.post("/api/setup", validate2(setupSchema), async (req, res) => {
+    const count = await db.countUsers();
+    if (count > 0) {
+      res.status(409).json({ error: "Setup already complete" });
+      return;
+    }
+    const { username, password } = req.body;
+    const existing = await db.findUserByUsername(username);
+    if (existing) {
+      res.status(409).json({ error: "Username already taken" });
+      return;
+    }
+    const passwordHash = await hashPassword(password);
+    const user = await db.createUser({ username, passwordHash, role: "admin" });
+    const token = signToken({ sub: user.id, username: user.username, role: user.role });
+    setAuthCookie(res, token);
+    res.json({ token, user: { id: user.id, username: user.username, role: user.role } });
+  });
+  router.get("/api/accounts", requireAuth, requireAdmin, async (_req, res) => {
+    const users = await db.getAllUsers();
+    res.json(users.map((u) => ({ id: u.id, username: u.username, role: u.role, createdAt: u.createdAt })));
+  });
+  router.post("/api/accounts", requireAuth, requireAdmin, validate2(createUserSchema), async (req, res) => {
+    const { username, password, role } = req.body;
+    const existing = await db.findUserByUsername(username);
+    if (existing) {
+      res.status(409).json({ error: "Username already taken" });
+      return;
+    }
+    const passwordHash = await hashPassword(password);
+    const user = await db.createUser({ username, passwordHash, role });
+    res.status(201).json({ id: user.id, username: user.username, role: user.role, createdAt: user.createdAt });
+  });
+  router.put("/api/accounts/:id", requireAuth, requireAdmin, validate2(updateUserSchema), async (req, res) => {
+    const { id } = req.params;
+    const user = await db.getUserById(id);
+    if (!user) {
+      res.status(404).json({ error: "User not found" });
+      return;
+    }
+    const updates = {};
+    if (req.body.role) updates.role = req.body.role;
+    if (req.body.password) updates.passwordHash = await hashPassword(req.body.password);
+    if (updates.role === "viewer" && user.role === "admin") {
+      const allAdmins = (await db.getAllUsers()).filter((u) => u.role === "admin");
+      if (allAdmins.length <= 1) {
+        res.status(400).json({ error: "Cannot demote the last admin" });
+        return;
+      }
+    }
+    await db.updateUser(id, updates);
+    const updated = await db.getUserById(id);
+    res.json({ id: updated.id, username: updated.username, role: updated.role });
+  });
+  router.delete("/api/accounts/:id", requireAuth, requireAdmin, async (req, res) => {
+    const { id } = req.params;
+    const actor = req.user;
+    if (actor.sub === id) {
+      res.status(400).json({ error: "Cannot delete your own account" });
+      return;
+    }
+    const user = await db.getUserById(id);
+    if (!user) {
+      res.status(404).json({ error: "User not found" });
+      return;
+    }
+    if (user.role === "admin") {
+      const allAdmins = (await db.getAllUsers()).filter((u) => u.role === "admin");
+      if (allAdmins.length <= 1) {
+        res.status(400).json({ error: "Cannot delete the last admin" });
+        return;
+      }
+    }
+    await db.deleteUser(id);
+    res.json({ success: true });
+  });
+  return router;
+}
+
+// cli/env-routes.ts
+init_esm_shims();
+import { Router as Router3 } from "express";
+import { readFileSync as readFileSync2, writeFileSync as writeFileSync2, existsSync } from "fs";
+import { join as join2 } from "path";
+
+// cli/env-config.ts
+init_esm_shims();
+var ENV_VARIABLES = [
+  // ============================================================================
+  // LLM CONFIGURATION
+  // ============================================================================
+  {
+    key: "LLM_PROVIDER",
+    type: "select",
+    category: "llm",
+    required: true,
+    description: "LLM provider to use for AI operations",
+    options: ["openai", "anthropic", "ollama"],
+    placeholder: "openai",
+    restartRequired: true
+  },
+  {
+    key: "OPENAI_API_KEY",
+    type: "password",
+    category: "llm",
+    required: false,
+    description: "OpenAI API key (required if LLM_PROVIDER=openai)",
+    placeholder: "sk-...",
+    sensitive: true,
+    testable: true,
+    validation: (value) => {
+      if (!value) return { valid: true };
+      if (!value.startsWith("sk-")) {
+        return { valid: false, error: 'OpenAI API key must start with "sk-"' };
+      }
+      if (value.length < 20) {
+        return { valid: false, error: "API key seems too short" };
+      }
+      return { valid: true };
+    },
+    restartRequired: true
+  },
+  {
+    key: "ANTHROPIC_API_KEY",
+    type: "password",
+    category: "llm",
+    required: false,
+    description: "Anthropic API key (required if LLM_PROVIDER=anthropic)",
+    placeholder: "sk-ant-...",
+    sensitive: true,
+    testable: true,
+    validation: (value) => {
+      if (!value) return { valid: true };
+      if (!value.startsWith("sk-ant-")) {
+        return { valid: false, error: 'Anthropic API key must start with "sk-ant-"' };
+      }
+      return { valid: true };
+    },
+    restartRequired: true
+  },
+  {
+    key: "OLLAMA_BASE_URL",
+    type: "url",
+    category: "llm",
+    required: false,
+    description: "Ollama server URL (required if LLM_PROVIDER=ollama)",
+    placeholder: "http://localhost:11434",
+    testable: true,
+    validation: (value) => {
+      if (!value) return { valid: true };
+      try {
+        new URL(value);
+        return { valid: true };
+      } catch {
+        return { valid: false, error: "Invalid URL format" };
+      }
+    },
+    restartRequired: true
+  },
+  {
+    key: "LLM_MODEL",
+    type: "text",
+    category: "llm",
+    required: false,
+    description: "LLM model to use (e.g., gpt-4, claude-3-opus, llama2)",
+    placeholder: "gpt-4",
+    restartRequired: true
+  },
+  // ============================================================================
+  // SECURITY
+  // ============================================================================
+  {
+    key: "OPENQA_JWT_SECRET",
+    type: "password",
+    category: "security",
+    required: true,
+    description: "Secret key for JWT token signing (min 32 characters)",
+    placeholder: "Generate with: openssl rand -hex 32",
+    sensitive: true,
+    validation: (value) => {
+      if (!value) return { valid: false, error: "JWT secret is required" };
+      if (value.length < 32) {
+        return { valid: false, error: "JWT secret must be at least 32 characters" };
+      }
+      return { valid: true };
+    },
+    restartRequired: true
+  },
+  {
+    key: "OPENQA_AUTH_DISABLED",
+    type: "boolean",
+    category: "security",
+    required: false,
+    description: "\u26A0\uFE0F DANGER: Disable authentication (NEVER use in production!)",
+    placeholder: "false",
+    validation: (value) => {
+      if (value === "true" && process.env.NODE_ENV === "production") {
+        return { valid: false, error: "Cannot disable auth in production!" };
+      }
+      return { valid: true };
+    },
+    restartRequired: true
+  },
+  {
+    key: "NODE_ENV",
+    type: "select",
+    category: "security",
+    required: false,
+    description: "Node environment (production enables security features)",
+    options: ["development", "production", "test"],
+    placeholder: "production",
+    restartRequired: true
+  },
+  // ============================================================================
+  // TARGET APPLICATION
+  // ============================================================================
+  {
+    key: "SAAS_URL",
+    type: "url",
+    category: "target",
+    required: true,
+    description: "URL of the application to test",
+    placeholder: "https://your-app.com",
+    testable: true,
+    validation: (value) => {
+      if (!value) return { valid: false, error: "Target URL is required" };
+      try {
+        const url = new URL(value);
+        if (!["http:", "https:"].includes(url.protocol)) {
+          return { valid: false, error: "URL must use http or https protocol" };
+        }
+        return { valid: true };
+      } catch {
+        return { valid: false, error: "Invalid URL format" };
+      }
+    }
+  },
+  {
+    key: "SAAS_AUTH_TYPE",
+    type: "select",
+    category: "target",
+    required: false,
+    description: "Authentication type for target application",
+    options: ["none", "basic", "session"],
+    placeholder: "none"
+  },
+  {
+    key: "SAAS_USERNAME",
+    type: "text",
+    category: "target",
+    required: false,
+    description: "Username for target application authentication",
+    placeholder: "test@example.com"
+  },
+  {
+    key: "SAAS_PASSWORD",
+    type: "password",
+    category: "target",
+    required: false,
+    description: "Password for target application authentication",
+    placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
+    sensitive: true
+  },
+  // ============================================================================
+  // GITHUB INTEGRATION
+  // ============================================================================
+  {
+    key: "GITHUB_TOKEN",
+    type: "password",
+    category: "github",
+    required: false,
+    description: "GitHub personal access token for issue creation",
+    placeholder: "ghp_...",
+    sensitive: true,
+    testable: true,
+    validation: (value) => {
+      if (!value) return { valid: true };
+      if (!value.startsWith("ghp_") && !value.startsWith("github_pat_")) {
+        return { valid: false, error: 'GitHub token must start with "ghp_" or "github_pat_"' };
+      }
+      return { valid: true };
+    }
+  },
+  {
+    key: "GITHUB_OWNER",
+    type: "text",
+    category: "github",
+    required: false,
+    description: "GitHub repository owner/organization",
+    placeholder: "your-username"
+  },
+  {
+    key: "GITHUB_REPO",
+    type: "text",
+    category: "github",
+    required: false,
+    description: "GitHub repository name",
+    placeholder: "your-repo"
+  },
+  {
+    key: "GITHUB_BRANCH",
+    type: "text",
+    category: "github",
+    required: false,
+    description: "GitHub branch to monitor",
+    placeholder: "main"
+  },
+  // ============================================================================
+  // WEB SERVER
+  // ============================================================================
+  {
+    key: "WEB_PORT",
+    type: "number",
+    category: "web",
+    required: false,
+    description: "Port for web server",
+    placeholder: "4242",
+    validation: (value) => {
+      if (!value) return { valid: true };
+      const port = parseInt(value, 10);
+      if (isNaN(port) || port < 1 || port > 65535) {
+        return { valid: false, error: "Port must be between 1 and 65535" };
+      }
+      return { valid: true };
+    },
+    restartRequired: true
+  },
+  {
+    key: "WEB_HOST",
+    type: "text",
+    category: "web",
+    required: false,
+    description: "Host to bind web server (0.0.0.0 for all interfaces)",
+    placeholder: "0.0.0.0",
+    restartRequired: true
+  },
+  {
+    key: "CORS_ORIGINS",
+    type: "text",
+    category: "web",
+    required: false,
+    description: "Allowed CORS origins (comma-separated)",
+    placeholder: "https://your-domain.com,https://app.example.com",
+    restartRequired: true
+  },
+  // ============================================================================
+  // AGENT CONFIGURATION
+  // ============================================================================
+  {
+    key: "AGENT_AUTO_START",
+    type: "boolean",
+    category: "agent",
+    required: false,
+    description: "Auto-start agent on server launch",
+    placeholder: "false"
+  },
+  {
+    key: "AGENT_INTERVAL_MS",
+    type: "number",
+    category: "agent",
+    required: false,
+    description: "Agent run interval in milliseconds (1 hour = 3600000)",
+    placeholder: "3600000",
+    validation: (value) => {
+      if (!value) return { valid: true };
+      const interval = parseInt(value, 10);
+      if (isNaN(interval) || interval < 6e4) {
+        return { valid: false, error: "Interval must be at least 60000ms (1 minute)" };
+      }
+      return { valid: true };
+    }
+  },
+  {
+    key: "AGENT_MAX_ITERATIONS",
+    type: "number",
+    category: "agent",
+    required: false,
+    description: "Maximum iterations per agent session",
+    placeholder: "20",
+    validation: (value) => {
+      if (!value) return { valid: true };
+      const max = parseInt(value, 10);
+      if (isNaN(max) || max < 1 || max > 1e3) {
+        return { valid: false, error: "Max iterations must be between 1 and 1000" };
+      }
+      return { valid: true };
+    }
+  },
+  {
+    key: "GIT_LISTENER_ENABLED",
+    type: "boolean",
+    category: "agent",
+    required: false,
+    description: "Enable git merge/pipeline detection",
+    placeholder: "true"
+  },
+  {
+    key: "GIT_POLL_INTERVAL_MS",
+    type: "number",
+    category: "agent",
+    required: false,
+    description: "Git polling interval in milliseconds",
+    placeholder: "60000"
+  },
+  // ============================================================================
+  // DATABASE
+  // ============================================================================
+  {
+    key: "DB_PATH",
+    type: "text",
+    category: "database",
+    required: false,
+    description: "Path to SQLite database file",
+    placeholder: "./data/openqa.db",
+    restartRequired: true
+  },
+  // ============================================================================
+  // NOTIFICATIONS
+  // ============================================================================
+  {
+    key: "SLACK_WEBHOOK_URL",
+    type: "url",
+    category: "notifications",
+    required: false,
+    description: "Slack webhook URL for notifications",
+    placeholder: "https://hooks.slack.com/services/...",
+    sensitive: true,
+    testable: true,
+    validation: (value) => {
+      if (!value) return { valid: true };
+      if (!value.startsWith("https://hooks.slack.com/")) {
+        return { valid: false, error: "Invalid Slack webhook URL" };
+      }
+      return { valid: true };
+    }
+  },
+  {
+    key: "DISCORD_WEBHOOK_URL",
+    type: "url",
+    category: "notifications",
+    required: false,
+    description: "Discord webhook URL for notifications",
+    placeholder: "https://discord.com/api/webhooks/...",
+    sensitive: true,
+    testable: true,
+    validation: (value) => {
+      if (!value) return { valid: true };
+      if (!value.startsWith("https://discord.com/api/webhooks/")) {
+        return { valid: false, error: "Invalid Discord webhook URL" };
+      }
+      return { valid: true };
+    }
+  }
+];
+function getEnvVariable(key) {
+  return ENV_VARIABLES.find((v) => v.key === key);
+}
+function validateEnvValue(key, value) {
+  const envVar = getEnvVariable(key);
+  if (!envVar) return { valid: false, error: "Unknown environment variable" };
+  if (envVar.required && !value) {
+    return { valid: false, error: "This field is required" };
+  }
+  if (envVar.validation) {
+    return envVar.validation(value);
+  }
+  return { valid: true };
+}
+
+// cli/env-routes.ts
+function createEnvRouter() {
+  const router = Router3();
+  const ENV_FILE_PATH = join2(process.cwd(), ".env");
+  function readEnvFile() {
+    if (!existsSync(ENV_FILE_PATH)) {
+      return {};
+    }
+    const content = readFileSync2(ENV_FILE_PATH, "utf-8");
+    const env = {};
+    content.split("\n").forEach((line) => {
+      line = line.trim();
+      if (!line || line.startsWith("#")) return;
+      const match = line.match(/^([^=]+)=(.*)$/);
+      if (match) {
+        const [, key, value] = match;
+        env[key.trim()] = value.trim().replace(/^["']|["']$/g, "");
+      }
+    });
+    return env;
+  }
+  function writeEnvFile(env) {
+    const lines = [
+      "# OpenQA Environment Configuration",
+      "# Auto-generated by OpenQA Dashboard",
+      "# Last updated: " + (/* @__PURE__ */ new Date()).toISOString(),
+      ""
+    ];
+    const categories = {};
+    ENV_VARIABLES.forEach((v) => {
+      if (!categories[v.category]) {
+        categories[v.category] = [];
+      }
+      const value = env[v.key] || "";
+      if (value || v.required) {
+        categories[v.category].push(`${v.key}=${value}`);
+      }
+    });
+    const categoryNames = {
+      llm: "LLM CONFIGURATION",
+      security: "SECURITY",
+      target: "TARGET APPLICATION",
+      github: "GITHUB INTEGRATION",
+      web: "WEB SERVER",
+      agent: "AGENT CONFIGURATION",
+      database: "DATABASE",
+      notifications: "NOTIFICATIONS"
+    };
+    Object.entries(categories).forEach(([category, vars]) => {
+      if (vars.length > 0) {
+        lines.push("# " + "=".repeat(76));
+        lines.push(`# ${categoryNames[category] || category.toUpperCase()}`);
+        lines.push("# " + "=".repeat(76));
+        lines.push(...vars);
+        lines.push("");
+      }
+    });
+    writeFileSync2(ENV_FILE_PATH, lines.join("\n"));
+  }
+  router.get("/api/env", requireAuth, requireAdmin, (_req, res) => {
+    try {
+      const envFile = readEnvFile();
+      const processEnv = process.env;
+      const variables = ENV_VARIABLES.map((v) => ({
+        key: v.key,
+        value: envFile[v.key] || processEnv[v.key] || "",
+        type: v.type,
+        category: v.category,
+        required: v.required,
+        description: v.description,
+        placeholder: v.placeholder,
+        options: v.options,
+        sensitive: v.sensitive,
+        testable: v.testable,
+        restartRequired: v.restartRequired,
+        // Mask sensitive values
+        displayValue: v.sensitive && (envFile[v.key] || processEnv[v.key]) ? "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" : envFile[v.key] || processEnv[v.key] || ""
+      }));
+      res.json({
+        variables,
+        envFileExists: existsSync(ENV_FILE_PATH),
+        lastModified: existsSync(ENV_FILE_PATH) ? new Date(readFileSync2(ENV_FILE_PATH, "utf-8").match(/Last updated: (.+)/)?.[1] || 0).toISOString() : null
+      });
+    } catch (error) {
+      res.status(500).json({
+        error: "Failed to read environment variables",
+        details: error instanceof Error ? error.message : String(error)
+      });
+    }
+  });
+  router.get("/api/env/:key", requireAuth, requireAdmin, (req, res) => {
+    try {
+      const { key } = req.params;
+      const envVar = ENV_VARIABLES.find((v) => v.key === key);
+      if (!envVar) {
+        res.status(404).json({ error: "Environment variable not found" });
+        return;
+      }
+      const envFile = readEnvFile();
+      const value = envFile[key] || process.env[key] || "";
+      res.json({
+        ...envVar,
+        value,
+        displayValue: envVar.sensitive && value ? "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" : value
+      });
+    } catch (error) {
+      res.status(500).json({
+        error: "Failed to read environment variable",
+        details: error instanceof Error ? error.message : String(error)
+      });
+    }
+  });
+  router.put("/api/env/:key", requireAuth, requireAdmin, (req, res) => {
+    try {
+      const { key } = req.params;
+      const { value } = req.body;
+      const validation = validateEnvValue(key, value);
+      if (!validation.valid) {
+        res.status(400).json({ error: validation.error });
+        return;
+      }
+      const env = readEnvFile();
+      if (value === "" || value === null || value === void 0) {
+        delete env[key];
+      } else {
+        env[key] = value;
+      }
+      writeEnvFile(env);
+      if (value) {
+        process.env[key] = value;
+      } else {
+        delete process.env[key];
+      }
+      const envVar = ENV_VARIABLES.find((v) => v.key === key);
+      res.json({
+        success: true,
+        key,
+        value: envVar?.sensitive ? "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" : value,
+        restartRequired: envVar?.restartRequired || false
+      });
+    } catch (error) {
+      res.status(500).json({
+        error: "Failed to update environment variable",
+        details: error instanceof Error ? error.message : String(error)
+      });
+    }
+  });
+  router.post("/api/env/bulk", requireAuth, requireAdmin, (req, res) => {
+    try {
+      const { variables } = req.body;
+      if (!variables || typeof variables !== "object") {
+        res.status(400).json({ error: "Invalid request body" });
+        return;
+      }
+      const errors = {};
+      Object.entries(variables).forEach(([key, value]) => {
+        const validation = validateEnvValue(key, value);
+        if (!validation.valid) {
+          errors[key] = validation.error || "Invalid value";
+        }
+      });
+      if (Object.keys(errors).length > 0) {
+        res.status(400).json({ error: "Validation failed", errors });
+        return;
+      }
+      const env = readEnvFile();
+      Object.entries(variables).forEach(([key, value]) => {
+        if (value === "" || value === null || value === void 0) {
+          delete env[key];
+          delete process.env[key];
+        } else {
+          env[key] = value;
+          process.env[key] = value;
+        }
+      });
+      writeEnvFile(env);
+      const restartRequired = Object.keys(variables).some((key) => {
+        const envVar = ENV_VARIABLES.find((v) => v.key === key);
+        return envVar?.restartRequired;
+      });
+      res.json({
+        success: true,
+        updated: Object.keys(variables).length,
+        restartRequired
+      });
+    } catch (error) {
+      res.status(500).json({
+        error: "Failed to update environment variables",
+        details: error instanceof Error ? error.message : String(error)
+      });
+    }
+  });
+  router.post("/api/env/test/:key", requireAuth, requireAdmin, async (req, res) => {
+    try {
+      const { key } = req.params;
+      const { value } = req.body;
+      const envVar = ENV_VARIABLES.find((v) => v.key === key);
+      if (!envVar || !envVar.testable) {
+        res.status(400).json({ error: "This variable cannot be tested" });
+        return;
+      }
+      let testResult;
+      switch (key) {
+        case "OPENAI_API_KEY":
+          testResult = await testOpenAIKey(value);
+          break;
+        case "ANTHROPIC_API_KEY":
+          testResult = await testAnthropicKey(value);
+          break;
+        case "OLLAMA_BASE_URL":
+          testResult = await testOllamaURL(value);
+          break;
+        case "GITHUB_TOKEN":
+          testResult = await testGitHubToken(value);
+          break;
+        case "SAAS_URL":
+          testResult = await testURL(value);
+          break;
+        case "SLACK_WEBHOOK_URL":
+          testResult = await testSlackWebhook(value);
+          break;
+        case "DISCORD_WEBHOOK_URL":
+          testResult = await testDiscordWebhook(value);
+          break;
+        default:
+          testResult = { success: false, message: "Test not implemented for this variable" };
+      }
+      res.json(testResult);
+    } catch (error) {
+      res.status(500).json({
+        success: false,
+        message: error instanceof Error ? error.message : "Test failed"
+      });
+    }
+  });
+  router.post("/api/env/generate/:key", requireAuth, requireAdmin, (req, res) => {
+    try {
+      const { key } = req.params;
+      let generated;
+      switch (key) {
+        case "OPENQA_JWT_SECRET":
+          generated = Array.from(
+            { length: 64 },
+            () => Math.floor(Math.random() * 16).toString(16)
+          ).join("");
+          break;
+        default:
+          res.status(400).json({ error: "Generation not supported for this variable" });
+          return;
+      }
+      res.json({ success: true, value: generated });
+    } catch (error) {
+      res.status(500).json({
+        error: "Failed to generate value",
+        details: error instanceof Error ? error.message : String(error)
+      });
+    }
+  });
+  return router;
+}
+async function testOpenAIKey(apiKey) {
+  try {
+    const response = await fetch("https://api.openai.com/v1/models", {
+      headers: { "Authorization": `Bearer ${apiKey}` }
+    });
+    if (response.ok) {
+      return { success: true, message: "OpenAI API key is valid" };
+    }
+    return { success: false, message: "Invalid OpenAI API key" };
+  } catch {
+    return { success: false, message: "Failed to connect to OpenAI API" };
+  }
+}
+async function testAnthropicKey(apiKey) {
+  try {
+    const response = await fetch("https://api.anthropic.com/v1/messages", {
+      method: "POST",
+      headers: {
+        "x-api-key": apiKey,
+        "anthropic-version": "2023-06-01",
+        "content-type": "application/json"
+      },
+      body: JSON.stringify({
+        model: "claude-3-haiku-20240307",
+        max_tokens: 1,
+        messages: [{ role: "user", content: "test" }]
+      })
+    });
+    if (response.status === 200 || response.status === 400) {
+      return { success: true, message: "Anthropic API key is valid" };
+    }
+    return { success: false, message: "Invalid Anthropic API key" };
+  } catch {
+    return { success: false, message: "Failed to connect to Anthropic API" };
+  }
+}
+async function testOllamaURL(url) {
+  try {
+    const response = await fetch(`${url}/api/tags`);
+    if (response.ok) {
+      return { success: true, message: "Ollama server is accessible" };
+    }
+    return { success: false, message: "Ollama server returned an error" };
+  } catch {
+    return { success: false, message: "Cannot connect to Ollama server" };
+  }
+}
+async function testGitHubToken(token) {
+  try {
+    const response = await fetch("https://api.github.com/user", {
+      headers: { "Authorization": `token ${token}` }
+    });
+    if (response.ok) {
+      const data = await response.json();
+      return { success: true, message: `GitHub token is valid (user: ${data.login})` };
+    }
+    return { success: false, message: "Invalid GitHub token" };
+  } catch {
+    return { success: false, message: "Failed to connect to GitHub API" };
+  }
+}
+async function testURL(url) {
+  try {
+    const response = await fetch(url, { method: "HEAD" });
+    if (response.ok) {
+      return { success: true, message: "URL is accessible" };
+    }
+    return { success: false, message: `URL returned status ${response.status}` };
+  } catch {
+    return { success: false, message: "Cannot connect to URL" };
+  }
+}
+async function testSlackWebhook(url) {
+  try {
+    const response = await fetch(url, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ text: "OpenQA webhook test" })
+    });
+    if (response.ok) {
+      return { success: true, message: "Slack webhook is valid" };
+    }
+    return { success: false, message: "Invalid Slack webhook" };
+  } catch {
+    return { success: false, message: "Failed to connect to Slack webhook" };
+  }
+}
+async function testDiscordWebhook(url) {
+  try {
+    const response = await fetch(url, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ content: "OpenQA webhook test" })
+    });
+    if (response.ok || response.status === 204) {
+      return { success: true, message: "Discord webhook is valid" };
+    }
+    return { success: false, message: "Invalid Discord webhook" };
+  } catch {
+    return { success: false, message: "Failed to connect to Discord webhook" };
+  }
+}
+
 // cli/dashboard.html.ts
 init_esm_shims();
 function getDashboardHTML() {
@@ -1546,7 +2589,7 @@ function getDashboardHTML() {
     .logo-mark {
       width: 34px;
       height: 34px;
-      background: var(--accent);
+      background: transparent;
       border-radius: 8px;
       display: grid;
       place-items: center;
@@ -2168,7 +3211,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>
@@ -2178,39 +3223,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">
+          <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>
 
@@ -2242,7 +3317,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>
@@ -2250,7 +3327,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>
@@ -2258,7 +3337,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>
@@ -2266,7 +3347,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>
@@ -4115,15 +5198,1111 @@ function getConfigHTML(cfg) {
 </html>`;
 }
 
+// cli/login.html.ts
+init_esm_shims();
+function getLoginHTML(opts) {
+  const error = opts?.error ?? "";
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>OpenQA \u2014 Sign In</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Syne:wght@400;600;700;800&display=swap" rel="stylesheet">
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    :root {
+      --bg: #080b10;
+      --surface: #0d1117;
+      --panel: #111720;
+      --border: rgba(255,255,255,0.06);
+      --border-hi: rgba(255,255,255,0.14);
+      --accent: #f97316;
+      --accent-lo: rgba(249,115,22,0.08);
+      --text-1: #f1f5f9;
+      --text-2: #8b98a8;
+      --text-3: #4b5563;
+      --red: #ef4444;
+      --red-lo: rgba(239,68,68,0.10);
+    }
+    html, body { height: 100%; }
+    body {
+      background: var(--bg);
+      font-family: 'Syne', sans-serif;
+      color: var(--text-1);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 100vh;
+    }
+    .card {
+      width: 100%;
+      max-width: 400px;
+      background: var(--surface);
+      border: 1px solid var(--border-hi);
+      border-radius: 16px;
+      padding: 40px 36px 36px;
+      box-shadow: 0 24px 64px rgba(0,0,0,0.6);
+    }
+    .logo {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 32px;
+      justify-content: center;
+    }
+    .logo-mark {
+      width: 36px; height: 36px;
+      background: var(--accent);
+      border-radius: 8px;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 18px; font-weight: 800; color: #fff;
+    }
+    .logo-text { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
+    h1 { font-size: 20px; font-weight: 700; text-align: center; margin-bottom: 6px; }
+    .subtitle { font-size: 13px; color: var(--text-2); text-align: center; margin-bottom: 28px; }
+    .field { margin-bottom: 16px; }
+    label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; letter-spacing: 0.04em; text-transform: uppercase; }
+    input[type=text], input[type=password] {
+      width: 100%;
+      background: var(--panel);
+      border: 1px solid var(--border-hi);
+      border-radius: 8px;
+      padding: 10px 14px;
+      font-family: 'DM Mono', monospace;
+      font-size: 14px;
+      color: var(--text-1);
+      outline: none;
+      transition: border-color 0.15s;
+    }
+    input:focus { border-color: var(--accent); }
+    .error-msg {
+      background: var(--red-lo);
+      border: 1px solid rgba(239,68,68,0.3);
+      border-radius: 8px;
+      padding: 10px 14px;
+      font-size: 13px;
+      color: var(--red);
+      margin-bottom: 18px;
+      display: ${error ? "block" : "none"};
+    }
+    .btn {
+      width: 100%;
+      background: var(--accent);
+      color: #fff;
+      border: none;
+      border-radius: 8px;
+      padding: 12px;
+      font-family: 'Syne', sans-serif;
+      font-size: 15px;
+      font-weight: 700;
+      cursor: pointer;
+      margin-top: 8px;
+      transition: opacity 0.15s, transform 0.1s;
+    }
+    .btn:hover { opacity: 0.9; }
+    .btn:active { transform: scale(0.98); }
+    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
+    .footer { margin-top: 28px; text-align: center; font-size: 12px; color: var(--text-3); font-family: 'DM Mono', monospace; }
+  </style>
+</head>
+<body>
+  <div class="card">
+    <div class="logo">
+      <div class="logo-mark">Q</div>
+      <span class="logo-text">OpenQA</span>
+    </div>
+    <h1>Sign in</h1>
+    <p class="subtitle">Access your QA dashboard</p>
+
+    <div class="error-msg" id="error">${error || "Invalid credentials"}</div>
+
+    <form id="loginForm">
+      <div class="field">
+        <label for="username">Username</label>
+        <input type="text" id="username" name="username" autocomplete="username" autofocus required>
+      </div>
+      <div class="field">
+        <label for="password">Password</label>
+        <input type="password" id="password" name="password" autocomplete="current-password" required>
+      </div>
+      <button type="submit" class="btn" id="submitBtn">Sign In</button>
+    </form>
+
+    <div class="footer">OpenQA v1.3.4</div>
+  </div>
+
+  <script>
+    const form = document.getElementById('loginForm');
+    const errorEl = document.getElementById('error');
+    const btn = document.getElementById('submitBtn');
+
+    form.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      errorEl.style.display = 'none';
+      btn.disabled = true;
+      btn.textContent = 'Signing in\u2026';
+      try {
+        const res = await fetch('/api/auth/login', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            username: document.getElementById('username').value.trim(),
+            password: document.getElementById('password').value,
+          }),
+          credentials: 'include',
+        });
+        if (res.ok) {
+          const params = new URLSearchParams(window.location.search);
+          window.location.href = params.get('next') || '/';
+        } else {
+          const data = await res.json().catch(() => ({}));
+          errorEl.textContent = data.error || 'Invalid credentials';
+          errorEl.style.display = 'block';
+          btn.disabled = false;
+          btn.textContent = 'Sign In';
+        }
+      } catch {
+        errorEl.textContent = 'Network error \u2014 please try again';
+        errorEl.style.display = 'block';
+        btn.disabled = false;
+        btn.textContent = 'Sign In';
+      }
+    });
+  </script>
+</body>
+</html>`;
+}
+
+// cli/setup.html.ts
+init_esm_shims();
+function getSetupHTML() {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>OpenQA \u2014 Setup</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Syne:wght@400;600;700;800&display=swap" rel="stylesheet">
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    :root {
+      --bg: #080b10;
+      --surface: #0d1117;
+      --panel: #111720;
+      --border: rgba(255,255,255,0.06);
+      --border-hi: rgba(255,255,255,0.14);
+      --accent: #f97316;
+      --accent-lo: rgba(249,115,22,0.08);
+      --text-1: #f1f5f9;
+      --text-2: #8b98a8;
+      --text-3: #4b5563;
+      --red: #ef4444;
+      --red-lo: rgba(239,68,68,0.10);
+      --green: #22c55e;
+      --green-lo: rgba(34,197,94,0.08);
+    }
+    html, body { height: 100%; }
+    body {
+      background: var(--bg);
+      font-family: 'Syne', sans-serif;
+      color: var(--text-1);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 100vh;
+    }
+    .card {
+      width: 100%;
+      max-width: 440px;
+      background: var(--surface);
+      border: 1px solid var(--border-hi);
+      border-radius: 16px;
+      padding: 40px 36px 36px;
+      box-shadow: 0 24px 64px rgba(0,0,0,0.6);
+    }
+    .logo {
+      display: flex; align-items: center; gap: 10px;
+      margin-bottom: 28px; justify-content: center;
+    }
+    .logo-mark {
+      width: 36px; height: 36px;
+      background: var(--accent);
+      border-radius: 8px;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 18px; font-weight: 800; color: #fff;
+    }
+    .logo-text { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
+    h1 { font-size: 20px; font-weight: 700; text-align: center; margin-bottom: 6px; }
+    .subtitle { font-size: 13px; color: var(--text-2); text-align: center; margin-bottom: 28px; }
+    .badge {
+      display: inline-block;
+      background: var(--accent-lo);
+      color: var(--accent);
+      border: 1px solid rgba(249,115,22,0.25);
+      border-radius: 6px;
+      font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
+      padding: 3px 8px; margin-bottom: 20px;
+      text-align: center; width: 100%;
+    }
+    .field { margin-bottom: 16px; }
+    label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; letter-spacing: 0.04em; text-transform: uppercase; }
+    input[type=text], input[type=password] {
+      width: 100%;
+      background: var(--panel);
+      border: 1px solid var(--border-hi);
+      border-radius: 8px;
+      padding: 10px 14px;
+      font-family: 'DM Mono', monospace;
+      font-size: 14px;
+      color: var(--text-1);
+      outline: none;
+      transition: border-color 0.15s;
+    }
+    input:focus { border-color: var(--accent); }
+    .hint { font-size: 11px; color: var(--text-3); margin-top: 5px; font-family: 'DM Mono', monospace; }
+    .msg {
+      border-radius: 8px;
+      padding: 10px 14px;
+      font-size: 13px;
+      margin-bottom: 18px;
+      display: none;
+    }
+    .msg.error { background: var(--red-lo); border: 1px solid rgba(239,68,68,0.3); color: var(--red); }
+    .msg.success { background: var(--green-lo); border: 1px solid rgba(34,197,94,0.3); color: var(--green); }
+    .btn {
+      width: 100%;
+      background: var(--accent);
+      color: #fff;
+      border: none;
+      border-radius: 8px;
+      padding: 12px;
+      font-family: 'Syne', sans-serif;
+      font-size: 15px; font-weight: 700;
+      cursor: pointer; margin-top: 8px;
+      transition: opacity 0.15s, transform 0.1s;
+    }
+    .btn:hover { opacity: 0.9; }
+    .btn:active { transform: scale(0.98); }
+    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
+    .footer { margin-top: 28px; text-align: center; font-size: 12px; color: var(--text-3); font-family: 'DM Mono', monospace; }
+  </style>
+</head>
+<body>
+  <div class="card">
+    <div class="logo">
+      <div class="logo-mark">Q</div>
+      <span class="logo-text">OpenQA</span>
+    </div>
+    <div class="badge">FIRST RUN</div>
+    <h1>Create admin account</h1>
+    <p class="subtitle">Set up your OpenQA instance</p>
+
+    <div class="msg error" id="error"></div>
+    <div class="msg success" id="success"></div>
+
+    <form id="setupForm">
+      <div class="field">
+        <label for="username">Username or Email</label>
+        <input type="text" id="username" name="username" autocomplete="username" autofocus required pattern="[a-z0-9_.@-]+" title="Lowercase letters, digits, and ._@- characters">
+        <div class="hint">Use your email or a username (lowercase, digits, ._@- allowed)</div>
+      </div>
+      <div class="field">
+        <label for="password">Password</label>
+        <input type="password" id="password" name="password" autocomplete="new-password" required minlength="8">
+        <div class="hint">Minimum 8 characters</div>
+      </div>
+      <div class="field">
+        <label for="confirm">Confirm Password</label>
+        <input type="password" id="confirm" name="confirm" autocomplete="new-password" required minlength="8">
+      </div>
+      <button type="submit" class="btn" id="submitBtn">Create Account &amp; Sign In</button>
+    </form>
+
+    <div class="footer">OpenQA v1.3.4</div>
+  </div>
+
+  <script>
+    const form = document.getElementById('setupForm');
+    const errorEl = document.getElementById('error');
+    const successEl = document.getElementById('success');
+    const btn = document.getElementById('submitBtn');
+
+    form.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      errorEl.style.display = 'none';
+      successEl.style.display = 'none';
+
+      const password = document.getElementById('password').value;
+      const confirm = document.getElementById('confirm').value;
+      if (password !== confirm) {
+        errorEl.textContent = 'Passwords do not match';
+        errorEl.style.display = 'block';
+        return;
+      }
+
+      btn.disabled = true;
+      btn.textContent = 'Creating account\u2026';
+
+      try {
+        const res = await fetch('/api/setup', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            username: document.getElementById('username').value.trim(),
+            password,
+          }),
+          credentials: 'include',
+        });
+
+        if (res.ok) {
+          successEl.textContent = 'Account created! Redirecting\u2026';
+          successEl.style.display = 'block';
+          setTimeout(() => { window.location.href = '/'; }, 800);
+        } else {
+          const data = await res.json().catch(() => ({}));
+          errorEl.textContent = data.error || 'Setup failed';
+          errorEl.style.display = 'block';
+          btn.disabled = false;
+          btn.textContent = 'Create Account & Sign In';
+        }
+      } catch {
+        errorEl.textContent = 'Network error \u2014 please try again';
+        errorEl.style.display = 'block';
+        btn.disabled = false;
+        btn.textContent = 'Create Account & Sign In';
+      }
+    });
+  </script>
+</body>
+</html>`;
+}
+
+// cli/env.html.ts
+init_esm_shims();
+function getEnvHTML() {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Environment Variables - OpenQA</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      min-height: 100vh;
+      padding: 20px;
+    }
+
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+
+    .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);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .header h1 {
+      font-size: 24px;
+      color: #1a202c;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .header-actions {
+      display: flex;
+      gap: 10px;
+    }
+
+    .btn {
+      padding: 10px 20px;
+      border: none;
+      border-radius: 8px;
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s;
+      text-decoration: none;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .btn-primary {
+      background: #667eea;
+      color: white;
+    }
+
+    .btn-primary:hover {
+      background: #5568d3;
+      transform: translateY(-1px);
+    }
+
+    .btn-secondary {
+      background: #e2e8f0;
+      color: #4a5568;
+    }
+
+    .btn-secondary:hover {
+      background: #cbd5e0;
+    }
+
+    .btn-success {
+      background: #48bb78;
+      color: white;
+    }
+
+    .btn-success:hover {
+      background: #38a169;
+    }
+
+    .btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .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);
+    }
+
+    .tabs {
+      display: flex;
+      gap: 10px;
+      margin-bottom: 30px;
+      border-bottom: 2px solid #e2e8f0;
+      padding-bottom: 10px;
+    }
+
+    .tab {
+      padding: 10px 20px;
+      border: none;
+      background: none;
+      font-size: 14px;
+      font-weight: 600;
+      color: #718096;
+      cursor: pointer;
+      border-bottom: 3px solid transparent;
+      transition: all 0.2s;
+    }
+
+    .tab.active {
+      color: #667eea;
+      border-bottom-color: #667eea;
+    }
+
+    .tab:hover {
+      color: #667eea;
+    }
+
+    .category-section {
+      display: none;
+    }
+
+    .category-section.active {
+      display: block;
+    }
+
+    .category-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;
+    }
+
+    .env-item {
+      border: 1px solid #e2e8f0;
+      border-radius: 8px;
+      padding: 20px;
+      transition: all 0.2s;
+    }
+
+    .env-item:hover {
+      border-color: #cbd5e0;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    }
+
+    .env-item-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      margin-bottom: 10px;
+    }
+
+    .env-label {
+      font-weight: 600;
+      color: #2d3748;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .required-badge {
+      background: #fc8181;
+      color: white;
+      font-size: 10px;
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-weight: 700;
+    }
+
+    .env-description {
+      font-size: 13px;
+      color: #718096;
+      margin-bottom: 10px;
+    }
+
+    .env-input-group {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+    }
+
+    .env-input {
+      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 {
+      outline: none;
+      border-color: #667eea;
+      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+    }
+
+    .env-input.error {
+      border-color: #fc8181;
+    }
+
+    .env-actions {
+      display: flex;
+      gap: 5px;
+    }
+
+    .icon-btn {
+      padding: 8px;
+      border: none;
+      background: #e2e8f0;
+      border-radius: 6px;
+      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;
+    }
+
+    .error-message {
+      color: #e53e3e;
+      font-size: 12px;
+      margin-top: 5px;
+    }
+
+    .success-message {
+      color: #38a169;
+      font-size: 12px;
+      margin-top: 5px;
+    }
+
+    .alert {
+      padding: 15px 20px;
+      border-radius: 8px;
+      margin-bottom: 20px;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .alert-warning {
+      background: #fef5e7;
+      border-left: 4px solid #f59e0b;
+      color: #92400e;
+    }
+
+    .alert-info {
+      background: #eff6ff;
+      border-left: 4px solid #3b82f6;
+      color: #1e40af;
+    }
+
+    .alert-success {
+      background: #f0fdf4;
+      border-left: 4px solid #10b981;
+      color: #065f46;
+    }
+
+    .loading {
+      text-align: center;
+      padding: 40px;
+      color: #718096;
+    }
+
+    .spinner {
+      border: 3px solid #e2e8f0;
+      border-top: 3px solid #667eea;
+      border-radius: 50%;
+      width: 40px;
+      height: 40px;
+      animation: spin 1s linear infinite;
+      margin: 0 auto 20px;
+    }
+
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+
+    .modal {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.5);
+      z-index: 1000;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .modal.show {
+      display: flex;
+    }
+
+    .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);
+    }
+
+    .modal-header {
+      font-size: 20px;
+      font-weight: 600;
+      margin-bottom: 15px;
+      color: #2d3748;
+    }
+
+    .modal-body {
+      margin-bottom: 20px;
+      color: #4a5568;
+    }
+
+    .modal-footer {
+      display: flex;
+      gap: 10px;
+      justify-content: flex-end;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="header">
+      <h1>
+        <span>\u2699\uFE0F</span>
+        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>
+
+    <div class="content">
+      <div id="loading" class="loading">
+        <div class="spinner"></div>
+        <div>Loading environment variables...</div>
+      </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>
+
+        <div id="categories"></div>
+      </div>
+    </div>
+  </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>
+    </div>
+  </div>
+
+  <script>
+    let envVariables = [];
+    let changedVariables = {};
+    let restartRequired = false;
+
+    // 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);
+      }
+    }
+
+    // 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);
+      });
+    }
+
+    // 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>
+        </div>
+      \`;
+    }
+
+    // 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 = '';
+    }
+
+    // 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 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';
+      }
+    }
+
+    // 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 });
+      }
+    }
+
+    // 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;
+      }
+    }
+
+    // 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');
+    }
+
+    function closeTestModal() {
+      document.getElementById('testModal').classList.remove('show');
+    }
+
+    // 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');
+      }
+    });
+
+    // Save button
+    document.getElementById('saveBtn').addEventListener('click', saveChanges);
+
+    // Load on page load
+    loadEnvVariables();
+  </script>
+</body>
+</html>`;
+}
+
 // cli/server.ts
 import chalk from "chalk";
+import rateLimit from "express-rate-limit";
+import cors from "cors";
 async function startWebServer() {
   const config = new ConfigManager();
   const cfg = config.getConfigSync();
   const db = new OpenQADatabase("./data/openqa.json");
   const app = express();
-  app.use(express.json());
+  const allowedOrigins = (process.env.CORS_ORIGINS || `http://localhost:${cfg.web.port}`).split(",");
+  app.use(cors({
+    origin: (origin, cb) => {
+      if (!origin || allowedOrigins.includes(origin) || allowedOrigins.includes("*")) {
+        cb(null, true);
+      } else {
+        cb(new Error(`CORS: origin ${origin} not allowed`));
+      }
+    },
+    credentials: true
+  }));
+  app.use(express.json({ limit: "1mb" }));
+  const apiLimiter = rateLimit({
+    windowMs: 6e4,
+    max: 300,
+    standardHeaders: true,
+    legacyHeaders: false,
+    message: { error: "Too many requests, please try again later." }
+  });
+  app.use("/api/", apiLimiter);
+  const mutationLimiter = rateLimit({
+    windowMs: 6e4,
+    max: 30,
+    standardHeaders: true,
+    legacyHeaders: false,
+    message: { error: "Too many requests, please slow down." }
+  });
+  app.use(["/api/start", "/api/stop", "/api/auth/login"], mutationLimiter);
   const wss = new WebSocketServer({ noServer: true });
+  app.use(createAuthRouter(db));
+  app.use(createEnvRouter());
+  app.use("/api", (req, res, next) => {
+    const PUBLIC_PATHS = ["/auth/login", "/auth/logout", "/setup", "/health"];
+    if (PUBLIC_PATHS.some((p) => req.path === p || req.path.startsWith(p + "/"))) return next();
+    return requireAuth(req, res, next);
+  });
   app.use(createApiRouter(db, config));
   app.post("/api/intervention/:id", async (req, res) => {
     const { id } = req.params;
@@ -4202,15 +6381,28 @@ async function startWebServer() {
       res.status(500).json({ error: error instanceof Error ? error.message : String(error) });
     }
   });
-  app.get("/", (req, res) => {
+  app.get("/login", async (_req, res) => {
+    const count = await db.countUsers();
+    if (count === 0) return res.redirect("/setup");
+    res.send(getLoginHTML());
+  });
+  app.get("/setup", async (_req, res) => {
+    const count = await db.countUsers();
+    if (count > 0) return res.redirect("/login");
+    res.send(getSetupHTML());
+  });
+  app.get("/", authOrRedirect(db), (_req, res) => {
     res.send(getDashboardHTML());
   });
-  app.get("/kanban", (req, res) => {
+  app.get("/kanban", authOrRedirect(db), (_req, res) => {
     res.send(getKanbanHTML());
   });
-  app.get("/config", (req, res) => {
+  app.get("/config", authOrRedirect(db), (_req, res) => {
     res.send(getConfigHTML(config.getConfigSync()));
   });
+  app.get("/config/env", authOrRedirect(db), (_req, res) => {
+    res.send(getEnvHTML());
+  });
   const server = app.listen(cfg.web.port, cfg.web.host, () => {
     console.log(chalk.cyan("\n\u{1F4CA} OpenQA Status:"));
     console.log(chalk.white(`  Agent: ${cfg.agent.autoStart ? "Auto-start enabled" : "Idle"}`));
@@ -4218,6 +6410,7 @@ async function startWebServer() {
     console.log(chalk.white(`  Dashboard: http://localhost:${cfg.web.port}`));
     console.log(chalk.white(`  Kanban: http://localhost:${cfg.web.port}/kanban`));
     console.log(chalk.white(`  Config: http://localhost:${cfg.web.port}/config`));
+    console.log(chalk.white(`  Env Variables: http://localhost:${cfg.web.port}/config/env`));
     console.log(chalk.gray("\nPress Ctrl+C to stop\n"));
     if (!cfg.agent.autoStart) {
       console.log(chalk.yellow("\u{1F4A1} Auto-start disabled. Agent is idle."));