npm - @openqa/cli - Versions diffs - 1.3.2 → 1.3.3 - Mend

@openqa/cli 1.3.2 → 1.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/cli/index.js CHANGED Viewed

@@ -363,15 +363,50 @@ async function startWebServer() {
       res.status(500).json({ success: false, error: error.message });
     }
   });
-  app.post("/api/intervention/:id", (req, res) => {
+  app.post("/api/intervention/:id", async (req, res) => {
     const { id } = req.params;
     const { response } = req.body;
-    console.log(`Intervention ${id}: ${response}`);
-    broadcast({
-      type: "intervention-response",
-      data: { id, response, timestamp: (/* @__PURE__ */ new Date()).toISOString() }
-    });
-    res.json({ success: true });
+    console.log(`Intervention ${id} ${response} by user`);
+    res.json({ success: true, message: `Intervention ${response}d` });
+  });
+  app.post("/api/test-connection", async (req, res) => {
+    try {
+      const cfg2 = config.getConfigSync();
+      if (cfg2.saas.url) {
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 1e4);
+        try {
+          const response = await fetch(cfg2.saas.url, {
+            method: "HEAD",
+            signal: controller.signal,
+            headers: cfg2.saas.authType === "basic" && cfg2.saas.username && cfg2.saas.password ? {
+              "Authorization": "Basic " + Buffer.from(`${cfg2.saas.username}:${cfg2.saas.password}`).toString("base64")
+            } : {}
+          });
+          clearTimeout(timeoutId);
+          if (response.ok) {
+            res.json({ success: true, message: "SaaS connection successful" });
+          } else {
+            res.json({ success: false, message: "SaaS connection failed" });
+          }
+        } catch (fetchError) {
+          clearTimeout(timeoutId);
+          throw fetchError;
+        }
+      } else {
+        res.json({ success: false, message: "No SaaS URL configured" });
+      }
+    } catch (error) {
+      res.json({ success: false, message: "Connection error: " + (error.message || String(error)) });
+    }
+  });
+  app.post("/api/start", async (req, res) => {
+    try {
+      console.log("Starting agent session...");
+      res.json({ success: true, message: "Session started" });
+    } catch (error) {
+      res.json({ success: false, message: "Failed to start session: " + (error.message || String(error)) });
+    }
   });
   app.get("/api/tasks", async (req, res) => {
     const tasks = [
@@ -1626,228 +1661,720 @@ async function startWebServer() {
     `);
   });
   app.get("/config", (req, res) => {
+    const cfg2 = config.getConfigSync();
     res.send(`
-      <!DOCTYPE html>
-      <html>
-        <head>
-          <title>OpenQA - Configuration</title>
-          <style>
-            body { font-family: system-ui; max-width: 800px; margin: 40px auto; padding: 20px; background: #0f172a; color: #e2e8f0; }
-            h1 { color: #38bdf8; }
-            nav { margin: 20px 0; }
-            nav a { color: #38bdf8; text-decoration: none; margin-right: 20px; }
-            nav a:hover { text-decoration: underline; }
-            .section { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 20px; margin: 20px 0; }
-            .section h2 { margin-top: 0; color: #38bdf8; font-size: 18px; }
-            .config-item { margin: 15px 0; }
-            .config-item label { display: block; margin-bottom: 5px; color: #94a3b8; font-size: 14px; }
-            .config-item input, .config-item select {
-              background: #334155;
-              border: 1px solid #475569;
-              color: #e2e8f0;
-              padding: 8px 12px;
-              border-radius: 4px;
-              font-family: monospace;
-              font-size: 14px;
-              width: 100%;
-              max-width: 400px;
-            }
-            .config-item input:focus, .config-item select:focus {
-              outline: none;
-              border-color: #38bdf8;
-              box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.1);
-            }
-            .btn {
-              background: #38bdf8;
-              color: white;
-              border: none;
-              padding: 10px 20px;
-              border-radius: 6px;
-              cursor: pointer;
-              font-size: 14px;
-              margin-right: 10px;
-            }
-            .btn:hover { background: #0ea5e9; }
-            .btn-secondary { background: #64748b; }
-            .btn-secondary:hover { background: #475569; }
-            .success { color: #10b981; margin-left: 10px; }
-            .error { color: #ef4444; margin-left: 10px; }
-            code { background: #334155; padding: 2px 6px; border-radius: 3px; font-size: 13px; }
-            .checkbox { margin-right: 8px; }
-          </style>
-        </head>
-        <body>
-          <h1>\u2699\uFE0F Configuration</h1>
-          <nav>
-            <a href="/">Dashboard</a>
-            <a href="/kanban">Kanban</a>
-            <a href="/config">Config</a>
-          </nav>
-          <div class="section">
-            <h2>SaaS Target</h2>
-            <form id="configForm">
-              <div class="config-item">
-                <label>URL</label>
-                <input type="url" id="saas_url" name="saas.url" value="${cfg.saas.url || ""}" placeholder="https://your-app.com">
-              </div>
-              <div class="config-item">
-                <label>Auth Type</label>
-                <select id="saas_authType" name="saas.authType">
-                  <option value="none" ${cfg.saas.authType === "none" ? "selected" : ""}>None</option>
-                  <option value="basic" ${cfg.saas.authType === "basic" ? "selected" : ""}>Basic Auth</option>
-                  <option value="bearer" ${cfg.saas.authType === "bearer" ? "selected" : ""}>Bearer Token</option>
-                  <option value="session" ${cfg.saas.authType === "session" ? "selected" : ""}>Session</option>
-                </select>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>OpenQA \u2014 Configuration</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>
+    :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;
+      --blue:      #38bdf8;
+      --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: var(--sans);
+      background: var(--bg);
+      color: var(--text-1);
+      min-height: 100vh;
+      overflow-x: hidden;
+    }
+    /* \u2500\u2500 Layout \u2500\u2500 */
+    .shell {
+      display: grid;
+      grid-template-columns: 220px 1fr;
+      grid-template-rows: 1fr;
+      min-height: 100vh;
+    }
+    /* \u2500\u2500 Sidebar \u2500\u2500 */
+    aside {
+      background: var(--surface);
+      border-right: 1px solid var(--border);
+      display: flex;
+      flex-direction: column;
+      padding: 28px 0;
+      position: sticky;
+      top: 0;
+      height: 100vh;
+    }
+    .logo {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 0 24px 32px;
+      border-bottom: 1px solid var(--border);
+      margin-bottom: 12px;
+    }
+    .logo-mark {
+      width: 34px;
+      height: 34px;
+      background: var(--accent);
+      border-radius: 8px;
+      display: grid;
+      place-items: center;
+      font-size: 16px;
+      flex-shrink: 0;
+    }
+    .logo-name {
+      font-family: var(--sans);
+      font-weight: 800;
+      font-size: 18px;
+      letter-spacing: -0.5px;
+      color: var(--text-1);
+    }
+    .logo-version {
+      font-family: var(--mono);
+      font-size: 10px;
+      color: var(--text-3);
+      letter-spacing: 0.5px;
+      margin-top: 2px;
+    }
+    .nav-section {
+      padding: 8px 12px;
+      flex: 1;
+    }
+    .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;
+    }
+    .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; }
+    .sidebar-footer {
+      padding: 16px 24px;
+      border-top: 1px solid var(--border);
+    }
+    .status-pill {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-family: var(--mono);
+      font-size: 11px;
+      color: var(--text-2);
+    }
+    .dot {
+      width: 7px;
+      height: 7px;
+      border-radius: 50%;
+      background: var(--green);
+      box-shadow: 0 0 8px var(--green);
+    }
+    /* \u2500\u2500 Main \u2500\u2500 */
+    main {
+      display: flex;
+      flex-direction: column;
+      min-height: 100vh;
+      overflow-y: auto;
+    }
+    .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;
+    }
+    .page-title {
+      font-size: 15px;
+      font-weight: 700;
+      color: var(--text-1);
+      letter-spacing: -0.2px;
+    }
+    .page-breadcrumb {
+      font-family: var(--mono);
+      font-size: 11px;
+      color: var(--text-3);
+      margin-top: 2px;
+    }
+    .topbar-actions {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+    .btn-sm {
+      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;
+      letter-spacing: 0.2px;
+    }
+    .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); }
+    .btn-primary {
+      background: var(--accent);
+      color: #fff;
+    }
+    .btn-primary:hover { background: #ea580c; box-shadow: 0 0 20px rgba(249,115,22,0.35); }
+    /* \u2500\u2500 Content \u2500\u2500 */
+    .content {
+      padding: 28px 32px;
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+    }
+    /* \u2500\u2500 Panel \u2500\u2500 */
+    .panel {
+      background: var(--panel);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      overflow: hidden;
+    }
+    .panel-head {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 18px 24px;
+      border-bottom: 1px solid var(--border);
+    }
+    .panel-title {
+      font-size: 13px;
+      font-weight: 700;
+      color: var(--text-1);
+      letter-spacing: -0.1px;
+    }
+    .panel-body {
+      padding: 24px;
+    }
+    /* \u2500\u2500 Form \u2500\u2500 */
+    .form-grid {
+      display: grid;
+      gap: 20px;
+    }
+    .form-section {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+    .form-section-title {
+      font-size: 12px;
+      font-weight: 700;
+      color: var(--text-2);
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      margin-bottom: 8px;
+      padding-bottom: 8px;
+      border-bottom: 1px solid var(--border);
+    }
+    .form-row {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+    }
+    .form-field {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+    .form-field.full {
+      grid-column: 1 / -1;
+    }
+    label {
+      font-family: var(--mono);
+      font-size: 11px;
+      color: var(--text-3);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      font-weight: 500;
+    }
+    input, select {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      color: var(--text-1);
+      padding: 10px 14px;
+      border-radius: var(--radius);
+      font-family: var(--mono);
+      font-size: 12px;
+      transition: all 0.15s ease;
+    }
+    input:focus, select:focus {
+      outline: none;
+      border-color: var(--accent);
+      box-shadow: 0 0 0 1px var(--accent);
+    }
+    input[type="checkbox"] {
+      width: 16px;
+      height: 16px;
+      margin: 0;
+      cursor: pointer;
+    }
+    .checkbox-label {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+      font-size: 12px;
+      color: var(--text-2);
+      text-transform: none;
+      letter-spacing: normal;
+    }
+    /* \u2500\u2500 Actions \u2500\u2500 */
+    .actions {
+      display: flex;
+      gap: 12px;
+      padding: 20px 24px;
+      background: var(--surface);
+      border-top: 1px solid var(--border);
+    }
+    .message {
+      font-family: var(--mono);
+      font-size: 11px;
+      padding: 8px 12px;
+      border-radius: var(--radius);
+      margin-left: auto;
+    }
+    .message.success {
+      background: var(--green-lo);
+      color: var(--green);
+      border: 1px solid rgba(34,197,94,0.2);
+    }
+    .message.error {
+      background: var(--red-lo);
+      color: var(--red);
+      border: 1px solid rgba(239,68,68,0.2);
+    }
+    /* \u2500\u2500 Code Block \u2500\u2500 */
+    .code-block {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 20px;
+      font-family: var(--mono);
+      font-size: 11px;
+      color: var(--text-2);
+      overflow-x: auto;
+    }
+    .code-block pre {
+      margin: 0;
+      line-height: 1.6;
+    }
+    /* \u2500\u2500 Responsive \u2500\u2500 */
+    @media (max-width: 900px) {
+      .shell { grid-template-columns: 1fr; }
+      aside  { display: none; }
+      .form-row { grid-template-columns: 1fr; }
+    }
+  </style>
+</head>
+<body>
+<div class="shell">
+  <!-- \u2500\u2500 Sidebar \u2500\u2500 -->
+  <aside>
+    <div class="logo">
+      <div class="logo-mark">\u2699</div>
+      <div>
+        <div class="logo-name">OpenQA</div>
+        <div class="logo-version">v2.1.0 \xB7 OSS</div>
+      </div>
+    </div>
+    <div class="nav-section">
+      <div class="nav-label">Overview</div>
+      <a class="nav-item" href="/">
+        <span class="icon">\u25A6</span> Dashboard
+      </a>
+      <a class="nav-item" href="/kanban">
+        <span class="icon">\u229E</span> Kanban
+      </a>
+      <div class="nav-label">System</div>
+      <a class="nav-item active" href="/config">
+        <span class="icon">\u2699</span> Configuration
+      </a>
+    </div>
+    <div class="sidebar-footer">
+      <div class="status-pill">
+        <div class="dot"></div>
+        <span>System Ready</span>
+      </div>
+    </div>
+  </aside>
+  <!-- \u2500\u2500 Main \u2500\u2500 -->
+  <main>
+    <!-- Topbar -->
+    <div class="topbar">
+      <div>
+        <div class="page-title">Configuration</div>
+        <div class="page-breadcrumb">openqa / system / settings</div>
+      </div>
+      <div class="topbar-actions">
+        <button class="btn-sm btn-ghost">Export Config</button>
+        <button class="btn-sm btn-ghost">Import Config</button>
+        <button class="btn-sm btn-primary" onclick="saveAllConfig()">Save All</button>
+      </div>
+    </div>
+    <!-- Content -->
+    <div class="content">
+      <!-- SaaS Configuration -->
+      <div class="panel">
+        <div class="panel-head">
+          <span class="panel-title">\u{1F310} SaaS Target Configuration</span>
+        </div>
+        <div class="panel-body">
+          <form class="form-grid" id="saas-form">
+            <div class="form-section">
+              <div class="form-section-title">Target Application</div>
+              <div class="form-field full">
+                <label>Application URL</label>
+                <input type="url" id="saas_url" name="saas.url" value="${cfg2.saas.url || ""}" placeholder="https://your-app.com">
               </div>
-              <div class="config-item">
-                <label>Username (for Basic Auth)</label>
-                <input type="text" id="saas_username" name="saas.username" value="${cfg.saas.username || ""}" placeholder="username">
+              <div class="form-row">
+                <div class="form-field">
+                  <label>Authentication Type</label>
+                  <select id="saas_authType" name="saas.authType">
+                    <option value="none" ${cfg2.saas.authType === "none" ? "selected" : ""}>None</option>
+                    <option value="basic" ${cfg2.saas.authType === "basic" ? "selected" : ""}>Basic Auth</option>
+                    <option value="bearer" ${cfg2.saas.authType === "bearer" ? "selected" : ""}>Bearer Token</option>
+                    <option value="session" ${cfg2.saas.authType === "session" ? "selected" : ""}>Session</option>
+                  </select>
+                </div>
+                <div class="form-field">
+                  <label>Timeout (seconds)</label>
+                  <input type="number" id="saas_timeout" name="saas.timeout" value="30" min="5" max="300">
+                </div>
               </div>
-              <div class="config-item">
-                <label>Password (for Basic Auth)</label>
-                <input type="password" id="saas_password" name="saas.password" value="${cfg.saas.password || ""}" placeholder="password">
+              <div class="form-row">
+                <div class="form-field">
+                  <label>Username</label>
+                  <input type="text" id="saas_username" name="saas.username" value="${cfg2.saas.username || ""}" placeholder="username">
+                </div>
+                <div class="form-field">
+                  <label>Password</label>
+                  <input type="password" id="saas_password" name="saas.password" value="${cfg2.saas.password || ""}" placeholder="password">
+                </div>
               </div>
-            </form>
-          </div>
+            </div>
+          </form>
+        </div>
+      </div>
-          <div class="section">
-            <h2>LLM Configuration</h2>
-            <form id="configForm">
-              <div class="config-item">
-                <label>Provider</label>
-                <select id="llm_provider" name="llm.provider">
-                  <option value="openai" ${cfg.llm.provider === "openai" ? "selected" : ""}>OpenAI</option>
-                  <option value="anthropic" ${cfg.llm.provider === "anthropic" ? "selected" : ""}>Anthropic</option>
-                  <option value="ollama" ${cfg.llm.provider === "ollama" ? "selected" : ""}>Ollama</option>
-                </select>
-              </div>
-              <div class="config-item">
-                <label>Model</label>
-                <input type="text" id="llm_model" name="llm.model" value="${cfg.llm.model || ""}" placeholder="gpt-4, claude-3-sonnet, etc.">
+      <!-- LLM Configuration -->
+      <div class="panel">
+        <div class="panel-head">
+          <span class="panel-title">\u{1F916} LLM Configuration</span>
+        </div>
+        <div class="panel-body">
+          <form class="form-grid" id="llm-form">
+            <div class="form-section">
+              <div class="form-section-title">Language Model Provider</div>
+              <div class="form-row">
+                <div class="form-field">
+                  <label>Provider</label>
+                  <select id="llm_provider" name="llm.provider">
+                    <option value="openai" ${cfg2.llm.provider === "openai" ? "selected" : ""}>OpenAI</option>
+                    <option value="anthropic" ${cfg2.llm.provider === "anthropic" ? "selected" : ""}>Anthropic</option>
+                    <option value="ollama" ${cfg2.llm.provider === "ollama" ? "selected" : ""}>Ollama</option>
+                  </select>
+                </div>
+                <div class="form-field">
+                  <label>Model</label>
+                  <input type="text" id="llm_model" name="llm.model" value="${cfg2.llm.model || ""}" placeholder="gpt-4, claude-3-sonnet, etc.">
+                </div>
               </div>
-              <div class="config-item">
+              <div class="form-field full">
                 <label>API Key</label>
-                <input type="password" id="llm_apiKey" name="llm.apiKey" value="${cfg.llm.apiKey || ""}" placeholder="Your API key">
+                <input type="password" id="llm_apiKey" name="llm.apiKey" value="${cfg2.llm.apiKey || ""}" placeholder="Your API key">
               </div>
-              <div class="config-item">
+              <div class="form-field full">
                 <label>Base URL (for Ollama)</label>
-                <input type="url" id="llm_baseUrl" name="llm.baseUrl" value="${cfg.llm.baseUrl || ""}" placeholder="http://localhost:11434">
+                <input type="url" id="llm_baseUrl" name="llm.baseUrl" value="${cfg2.llm.baseUrl || ""}" placeholder="http://localhost:11434">
               </div>
-            </form>
-          </div>
+            </div>
+          </form>
+        </div>
+      </div>
-          <div class="section">
-            <h2>Agent Settings</h2>
-            <form id="configForm">
-              <div class="config-item">
-                <label>
-                  <input type="checkbox" id="agent_autoStart" name="agent.autoStart" class="checkbox" ${cfg.agent.autoStart ? "checked" : ""}>
-                  Auto-start
+      <!-- Agent Configuration -->
+      <div class="panel">
+        <div class="panel-head">
+          <span class="panel-title">\u{1F3AF} Agent Settings</span>
+        </div>
+        <div class="panel-body">
+          <form class="form-grid" id="agent-form">
+            <div class="form-section">
+              <div class="form-section-title">Agent Behavior</div>
+              <div class="form-field">
+                <label class="checkbox-label">
+                  <input type="checkbox" id="agent_autoStart" name="agent.autoStart" ${cfg2.agent.autoStart ? "checked" : ""}>
+                  Auto-start on launch
                 </label>
               </div>
-              <div class="config-item">
-                <label>Interval (ms)</label>
-                <input type="number" id="agent_intervalMs" name="agent.intervalMs" value="${cfg.agent.intervalMs}" min="60000">
-              </div>
-              <div class="config-item">
-                <label>Max Iterations</label>
-                <input type="number" id="agent_maxIterations" name="agent.maxIterations" value="${cfg.agent.maxIterations}" min="1" max="100">
+              <div class="form-row">
+                <div class="form-field">
+                  <label>Check Interval (ms)</label>
+                  <input type="number" id="agent_intervalMs" name="agent.intervalMs" value="${cfg2.agent.intervalMs}" min="60000" step="60000">
+                </div>
+                <div class="form-field">
+                  <label>Max Iterations</label>
+                  <input type="number" id="agent_maxIterations" name="agent.maxIterations" value="${cfg2.agent.maxIterations}" min="1" max="100">
+                </div>
               </div>
-            </form>
-          </div>
+            </div>
+          </form>
+        </div>
+      </div>
-          <div class="section">
-            <h2>Actions</h2>
-            <button type="button" class="btn" onclick="saveConfig()">Save Configuration</button>
-            <button type="button" class="btn btn-secondary" onclick="resetConfig()">Reset to Defaults</button>
-            <span id="message"></span>
-          </div>
+      <!-- Environment Variables -->
+      <div class="panel">
+        <div class="panel-head">
+          <span class="panel-title">\u{1F4DD} Environment Variables</span>
+        </div>
+        <div class="panel-body">
+          <p style="color: var(--text-3); font-size: 12px; margin-bottom: 16px;">
+            You can also set these environment variables before starting OpenQA:
+          </p>
+          <div class="code-block">
+            <pre>export SAAS_URL="https://your-app.com"
+export SAAS_AUTH_TYPE="basic"
+export SAAS_USERNAME="admin"
+export SAAS_PASSWORD="secret"
+export LLM_PROVIDER="openai"
+export OPENAI_API_KEY="your-openai-key"
+export LLM_MODEL="gpt-4"
-          <div class="section">
-            <h2>Environment Variables</h2>
-            <p>You can also set these environment variables before starting OpenQA:</p>
-            <pre style="background: #334155; padding: 15px; border-radius: 6px; overflow-x: auto;"><code>export SAAS_URL="https://your-app.com"
 export AGENT_AUTO_START=true
-export LLM_PROVIDER=openai
-export OPENAI_API_KEY="your-key"
+export AGENT_INTERVAL_MS=3600000
+export AGENT_MAX_ITERATIONS=20
-openqa start</code></pre>
+openqa start</pre>
           </div>
+        </div>
+      </div>
-          <script>
-            async function saveConfig() {
-              const form = document.getElementById('configForm');
-              const formData = new FormData(form);
-              const config = {};
-              for (let [key, value] of formData.entries()) {
-                if (value === '') continue;
-                // Handle nested keys like "saas.url"
-                const keys = key.split('.');
-                let obj = config;
-                for (let i = 0; i < keys.length - 1; i++) {
-                  if (!obj[keys[i]]) obj[keys[i]] = {};
-                  obj = obj[keys[i]];
-                }
-                // Convert checkbox values to boolean
-                if (key.includes('autoStart')) {
-                  obj[keys[keys.length - 1]] = value === 'on';
-                } else if (key.includes('intervalMs') || key.includes('maxIterations')) {
-                  obj[keys[keys.length - 1]] = parseInt(value);
-                } else {
-                  obj[keys[keys.length - 1]] = value;
-                }
-              }
-              try {
-                const response = await fetch('/api/config', {
-                  method: 'POST',
-                  headers: { 'Content-Type': 'application/json' },
-                  body: JSON.stringify(config)
-                });
-                const result = await response.json();
-                if (result.success) {
-                  showMessage('Configuration saved successfully!', 'success');
-                  setTimeout(() => location.reload(), 1500);
-                } else {
-                  showMessage('Failed to save configuration', 'error');
-                }
-              } catch (error) {
-                showMessage('Error: ' + error.message, 'error');
-              }
-            }
-            async function resetConfig() {
-              if (confirm('Are you sure you want to reset all configuration to defaults?')) {
-                try {
-                  const response = await fetch('/api/config/reset', { method: 'POST' });
-                  const result = await response.json();
-                  if (result.success) {
-                    showMessage('Configuration reset to defaults', 'success');
-                    setTimeout(() => location.reload(), 1500);
-                  }
-                } catch (error) {
-                  showMessage('Error: ' + error.message, 'error');
-                }
-              }
-            }
-            function showMessage(text, type) {
-              const messageEl = document.getElementById('message');
-              messageEl.textContent = text;
-              messageEl.className = type;
-              setTimeout(() => {
-                messageEl.textContent = '';
-                messageEl.className = '';
-              }, 3000);
-            }
-          </script>
-        </body>
-      </html>
+      <!-- Actions -->
+      <div class="actions">
+        <button class="btn-sm btn-ghost" onclick="testConnection()">Test Connection</button>
+        <button class="btn-sm btn-ghost" onclick="exportConfig()">Export Config</button>
+        <button class="btn-sm btn-ghost" onclick="resetConfig()">Reset to Defaults</button>
+        <div id="message"></div>
+      </div>
+    </div><!-- /content -->
+  </main>
+</div><!-- /shell -->
+<script>
+  async function saveAllConfig() {
+    const forms = ['saas-form', 'llm-form', 'agent-form'];
+    const config = {};
+    for (const formId of forms) {
+      const form = document.getElementById(formId);
+      const formData = new FormData(form);
+      for (let [key, value] of formData.entries()) {
+        if (value === '') continue;
+        // Handle nested keys like "saas.url"
+        const keys = key.split('.');
+        let obj = config;
+        for (let i = 0; i < keys.length - 1; i++) {
+          if (!obj[keys[i]]) obj[keys[i]] = {};
+          obj = obj[keys[i]];
+        }
+        // Convert checkbox values to boolean
+        if (key.includes('autoStart')) {
+          obj[keys[keys.length - 1]] = value === 'on';
+        } else if (key.includes('intervalMs') || key.includes('maxIterations') || key.includes('timeout')) {
+          obj[keys[keys.length - 1]] = parseInt(value);
+        } else {
+          obj[keys[keys.length - 1]] = value;
+        }
+      }
+    }
+    try {
+      const response = await fetch('/api/config', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(config)
+      });
+      if (response.ok) {
+        showMessage('Configuration saved successfully!', 'success');
+      } else {
+        showMessage('Failed to save configuration', 'error');
+      }
+    } catch (error) {
+      showMessage('Error: ' + error.message, 'error');
+    }
+  }
+  async function testConnection() {
+    showMessage('Testing connection...', 'success');
+    try {
+      const response = await fetch('/api/test-connection', { method: 'POST' });
+      if (response.ok) {
+        showMessage('Connection successful!', 'success');
+      } else {
+        showMessage('Connection failed', 'error');
+      }
+    } catch (error) {
+      showMessage('Connection error: ' + error.message, 'error');
+    }
+  }
+  async function exportConfig() {
+    try {
+      const response = await fetch('/api/config');
+      const config = await response.json();
+      const blob = new Blob([JSON.stringify(config, null, 2)], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'openqa-config.json';
+      a.click();
+      URL.revokeObjectURL(url);
+      showMessage('Configuration exported', 'success');
+    } catch (error) {
+      showMessage('Export failed: ' + error.message, 'error');
+    }
+  }
+  async function resetConfig() {
+    if (confirm('Are you sure you want to reset all configuration to defaults? This cannot be undone.')) {
+      try {
+        const response = await fetch('/api/config/reset', { method: 'POST' });
+        if (response.ok) {
+          location.reload();
+        } else {
+          showMessage('Failed to reset configuration', 'error');
+        }
+      } catch (error) {
+        showMessage('Error: ' + error.message, 'error');
+      }
+    }
+  }
+  function showMessage(msg, type) {
+    const el = document.getElementById('message');
+    el.textContent = msg;
+    el.className = 'message ' + type;
+    setTimeout(() => { el.textContent = ''; el.className = ''; }, 5000);
+  }
+  // Auto-save on field change
+  document.querySelectorAll('input, select').forEach(field => {
+    field.addEventListener('change', () => {
+      showMessage('Changes made - click "Save All" to apply', 'success');
+    });
+  });
+</script>
+</body>
+</html>
     `);
   });
   const server = app.listen(cfg.web.port, cfg.web.host, () => {