@openqa/cli 1.3.1 → 1.3.3

package/dist/cli/index.js

@@ -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 = [
@@ -434,158 +469,482 @@ async function startWebServer() {
           <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
           <script src="https://cdn.jsdelivr.net/npm/@xyflow/react@11/dist/umd/index.js"></script>
           <style>
-            body { font-family: system-ui; max-width: 1600px; margin: 20px auto; padding: 20px; background: #0f172a; color: #e2e8f0; }
-            h1 { color: #f97316; margin-bottom: 30px; }
-            .card { background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 24px; margin: 20px 0; }
-            .card-header { display: flex; justify-content: between; align-items: center; margin-bottom: 20px; }
-            .card-title { font-size: 18px; font-weight: 600; color: #f97316; }
-            .status { display: inline-block; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; }
+            * { box-sizing: border-box; margin: 0; padding: 0; }
+            
+            body { 
+              font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; 
+              background: #0a0a0a; 
+              color: #ffffff; 
+              min-height: 100vh;
+              overflow-x: hidden;
+              line-height: 1.6;
+            }
+            
+            .dashboard-container {
+              max-width: 1920px;
+              margin: 0 auto;
+              padding: 20px;
+              min-height: 100vh;
+            }
+            
+            .dashboard-header {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              margin-bottom: 32px;
+              padding: 24px 32px;
+              background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
+              border-radius: 16px;
+              border: 1px solid #333333;
+              backdrop-filter: blur(10px);
+            }
+            
+            .dashboard-title {
+              font-size: 32px;
+              font-weight: 700;
+              color: #f97316;
+              margin: 0;
+              letter-spacing: -0.5px;
+            }
+            
+            .nav {
+              display: flex;
+              gap: 8px;
+              background: rgba(255, 255, 255, 0.05);
+              padding: 4px;
+              border-radius: 12px;
+            }
+            
+            .nav-links a {
+              color: #9ca3af;
+              text-decoration: none;
+              font-weight: 500;
+              padding: 12px 24px;
+              border-radius: 8px;
+              transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+              display: flex;
+              align-items: center;
+              gap: 8px;
+            }
+            
+            .nav-links a:hover, .nav-links a.active {
+              color: #ffffff;
+              background: #f97316;
+              transform: translateY(-1px);
+            }
+            
+            .connection-status {
+              padding: 8px 16px;
+              border-radius: 20px;
+              font-size: 12px;
+              font-weight: 600;
+              text-transform: uppercase;
+              letter-spacing: 0.5px;
+            }
+            
             .status.running { background: linear-gradient(135deg, #10b981, #059669); color: white; }
             .status.idle { background: linear-gradient(135deg, #f59e0b, #d97706); color: white; }
             .status.error { background: linear-gradient(135deg, #ef4444, #dc2626); color: white; }
             .status.paused { background: linear-gradient(135deg, #64748b, #475569); color: white; }
-            .nav { display: flex; justify-content: space-between; align-items: center; margin: 20px 0; padding: 15px; background: #1e293b; border-radius: 12px; }
-            .nav-links { display: flex; gap: 30px; }
-            .nav-links a { color: #94a3b8; text-decoration: none; font-weight: 500; transition: color 0.2s; }
-            .nav-links a:hover, .nav-links a.active { color: #f97316; }
-            .grid { display: grid; gap: 20px; }
-            .grid-2 { grid-template-columns: repeat(2, 1fr); }
-            .grid-3 { grid-template-columns: repeat(3, 1fr); }
-            .grid-4 { grid-template-columns: repeat(4, 1fr); }
-            .metric-card { 
-              background: linear-gradient(135deg, #1e293b, #334155); 
-              border: 1px solid #334155; 
-              border-radius: 12px; 
-              padding: 20px; 
-              text-align: center;
+            
+            /* Metrics Grid */
+            .metrics-grid {
+              display: grid;
+              grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+              gap: 24px;
+              margin-bottom: 32px;
+            }
+            
+            .metric-card {
+              background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
+              border: 1px solid #333333;
+              border-radius: 16px;
+              padding: 28px 24px;
               position: relative;
               overflow: hidden;
+              transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+              min-height: 160px;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-between;
             }
-            .metric-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #f97316, #ea580c); }
-            .metric-value { font-size: 32px; font-weight: bold; color: #f97316; margin: 10px 0; }
-            .metric-label { color: #94a3b8; font-size: 14px; font-weight: 500; }
-            .metric-change { font-size: 12px; margin-top: 5px; }
+            
+            .metric-card::before {
+              content: '';
+              position: absolute;
+              top: 0;
+              left: 0;
+              right: 0;
+              height: 4px;
+              background: linear-gradient(90deg, #f97316, #ea580c, #f59e0b);
+              background-size: 200% 100%;
+              animation: shimmer 3s ease-in-out infinite;
+            }
+            
+            @keyframes shimmer {
+              0%, 100% { background-position: -200% 0; }
+              50% { background-position: 200% 0; }
+            }
+            
+            .metric-card:hover {
+              transform: translateY(-4px);
+              border-color: #f97316;
+              box-shadow: 0 20px 40px rgba(249, 115, 22, 0.15);
+            }
+            
+            .metric-header {
+              display: flex;
+              justify-content: space-between;
+              align-items: flex-start;
+              margin-bottom: 16px;
+            }
+            
+            .metric-label {
+              color: #9ca3af;
+              font-size: 14px;
+              font-weight: 500;
+              text-transform: uppercase;
+              letter-spacing: 0.5px;
+            }
+            
+            .metric-icon {
+              width: 40px;
+              height: 40px;
+              background: rgba(249, 115, 22, 0.1);
+              border-radius: 12px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: 20px;
+            }
+            
+            .metric-value {
+              font-size: 42px;
+              font-weight: 700;
+              color: #f97316;
+              margin: 8px 0;
+              line-height: 1;
+              background: linear-gradient(135deg, #f97316, #fbbf24);
+              -webkit-background-clip: text;
+              -webkit-text-fill-color: transparent;
+              background-clip: text;
+            }
+            
+            .metric-change {
+              font-size: 13px;
+              font-weight: 600;
+              display: flex;
+              align-items: center;
+              gap: 4px;
+            }
+            
             .metric-change.positive { color: #10b981; }
             .metric-change.negative { color: #ef4444; }
-            .chart-container { position: relative; height: 300px; margin: 20px 0; }
-            .hierarchy-container { height: 400px; border: 1px solid #334155; border-radius: 8px; background: #0f172a; }
-            .activity-item { 
-              background: #334155; 
-              padding: 15px; 
-              margin: 10px 0; 
-              border-radius: 8px; 
+            
+            /* Main Content Grid */
+            .main-grid {
+              display: grid;
+              grid-template-columns: 1fr 1fr;
+              gap: 24px;
+              margin-bottom: 32px;
+            }
+            
+            .card {
+              background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
+              border: 1px solid #333333;
+              border-radius: 16px;
+              padding: 28px;
+              position: relative;
+              overflow: hidden;
+              transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            }
+            
+            .card:hover {
+              border-color: #444444;
+              transform: translateY(-2px);
+            }
+            
+            .card-header {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              margin-bottom: 24px;
+            }
+            
+            .card-title {
+              font-size: 20px;
+              font-weight: 600;
+              color: #ffffff;
+              margin: 0;
+            }
+            
+            .tabs {
+              display: flex;
+              gap: 4px;
+              background: rgba(255, 255, 255, 0.05);
+              padding: 4px;
+              border-radius: 12px;
+            }
+            
+            .tab {
+              padding: 10px 20px;
+              background: transparent;
+              border: none;
+              border-radius: 8px;
+              color: #9ca3af;
+              font-weight: 500;
+              cursor: pointer;
+              transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            }
+            
+            .tab.active {
+              background: #f97316;
+              color: white;
+            }
+            
+            .tab:hover:not(.active) {
+              color: #ffffff;
+              background: rgba(255, 255, 255, 0.1);
+            }
+            
+            .chart-container {
+              position: relative;
+              height: 320px;
+              margin: 20px 0;
+            }
+            
+            .hierarchy-container {
+              height: 420px;
+              border: 1px solid #333333;
+              border-radius: 12px;
+              background: #0a0a0a;
+              overflow: hidden;
+            }
+            
+            /* Activity Feed */
+            .activity-feed {
+              max-height: 400px;
+              overflow-y: auto;
+              padding-right: 8px;
+            }
+            
+            .activity-feed::-webkit-scrollbar {
+              width: 6px;
+            }
+            
+            .activity-feed::-webkit-scrollbar-track {
+              background: rgba(255, 255, 255, 0.05);
+              border-radius: 3px;
+            }
+            
+            .activity-feed::-webkit-scrollbar-thumb {
+              background: #f97316;
+              border-radius: 3px;
+            }
+            
+            .activity-item {
+              background: rgba(255, 255, 255, 0.03);
+              border: 1px solid rgba(255, 255, 255, 0.08);
               border-left: 4px solid #f97316;
+              border-radius: 12px;
+              padding: 16px 20px;
+              margin-bottom: 12px;
               font-size: 14px;
-              transition: all 0.2s;
+              transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+              position: relative;
+              overflow: hidden;
+            }
+            
+            .activity-item::before {
+              content: '';
+              position: absolute;
+              top: 0;
+              left: 0;
+              right: 0;
+              height: 1px;
+              background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.3), transparent);
+              opacity: 0;
+              transition: opacity 0.3s;
             }
-            .activity-item:hover { transform: translateX(4px); background: #475569; }
+            
+            .activity-item:hover {
+              background: rgba(255, 255, 255, 0.06);
+              border-left-color: #fbbf24;
+              transform: translateX(8px);
+            }
+            
+            .activity-item:hover::before {
+              opacity: 1;
+            }
+            
             .activity-item.error { border-left-color: #ef4444; }
             .activity-item.success { border-left-color: #10b981; }
             .activity-item.warning { border-left-color: #f59e0b; }
-            .activity-time { color: #64748b; font-size: 12px; }
-            .intervention-request {
-              background: linear-gradient(135deg, #7c2d12, #92400e);
-              border: 1px solid #dc2626;
-              padding: 20px;
-              border-radius: 12px;
-              margin: 15px 0;
+            
+            .activity-time {
+              color: #6b7280;
+              font-size: 12px;
+              margin-top: 8px;
+              display: flex;
+              align-items: center;
+              gap: 4px;
+            }
+            
+            /* Buttons */
+            .btn {
+              background: linear-gradient(135deg, #f97316, #ea580c);
+              color: white;
+              border: none;
+              padding: 12px 24px;
+              border-radius: 10px;
+              cursor: pointer;
+              font-size: 14px;
+              font-weight: 600;
+              margin: 4px;
+              transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
               position: relative;
+              overflow: hidden;
             }
-            .intervention-request::before { content: '\u{1F6A8}'; position: absolute; top: 15px; right: 15px; font-size: 20px; }
-            .intervention-request h4 { color: #fbbf24; margin: 0 0 10px 0; }
-            .btn { 
-              background: linear-gradient(135deg, #f97316, #ea580c); 
-              color: white; 
-              border: none; 
-              padding: 10px 20px; 
-              border-radius: 8px; 
-              cursor: pointer; 
-              font-size: 14px; 
-              font-weight: 500;
-              margin: 5px;
-              transition: all 0.2s;
+            
+            .btn::before {
+              content: '';
+              position: absolute;
+              top: 0;
+              left: -100%;
+              width: 100%;
+              height: 100%;
+              background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+              transition: left 0.5s;
+            }
+            
+            .btn:hover {
+              transform: translateY(-2px);
+              box-shadow: 0 8px 24px rgba(249, 115, 22, 0.3);
             }
-            .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3); }
+            
+            .btn:hover::before {
+              left: 100%;
+            }
+            
             .btn-success { background: linear-gradient(135deg, #10b981, #059669); }
-            .btn-success:hover { box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); }
+            .btn-success:hover { box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3); }
             .btn-danger { background: linear-gradient(135deg, #ef4444, #dc2626); }
-            .btn-danger:hover { box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); }
-            .pulse { animation: pulse 2s infinite; }
-            @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
-            .loading { color: #f59e0b; }
-            .tabs { display: flex; gap: 10px; margin-bottom: 20px; }
-            .tab { padding: 10px 20px; background: #334155; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
-            .tab.active { background: #f97316; color: white; }
-            .tab-content { display: none; }
-            .tab-content.active { display: block; }
-            .agent-node { 
-              background: #1e293b; 
-              border: 2px solid #f97316; 
-              border-radius: 8px; 
-              padding: 10px; 
-              margin: 10px; 
-              text-align: center;
+            .btn-danger:hover { box-shadow: 0 8px 24px rgba(239, 68, 68, 0.3); }
+            
+            /* Performance bars */
+            .performance-bar {
+              height: 6px;
+              background: rgba(255, 255, 255, 0.1);
+              border-radius: 3px;
+              overflow: hidden;
+              margin: 8px 0;
             }
-            .performance-bar { 
-              height: 8px; 
-              background: #334155; 
-              border-radius: 4px; 
-              overflow: hidden; 
-              margin: 10px 0;
+            
+            .performance-fill {
+              height: 100%;
+              background: linear-gradient(90deg, #10b981, #f97316);
+              transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
+              border-radius: 3px;
             }
-            .performance-fill { 
-              height: 100%; 
-              background: linear-gradient(90deg, #10b981, #f97316); 
-              transition: width 1s ease;
+            
+            /* Responsive */
+            @media (max-width: 1200px) {
+              .main-grid {
+                grid-template-columns: 1fr;
+              }
             }
+            
+            @media (max-width: 768px) {
+              .dashboard-container {
+                padding: 16px;
+              }
+              
+              .metrics-grid {
+                grid-template-columns: 1fr;
+                gap: 16px;
+              }
+              
+              .dashboard-header {
+                flex-direction: column;
+                gap: 16px;
+                padding: 20px;
+              }
+              
+              .dashboard-title {
+                font-size: 24px;
+              }
+              
+              .metric-value {
+                font-size: 32px;
+              }
+            }
+            
+            /* Loading animation */
+            .pulse { animation: pulse 2s infinite; }
+            @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
+          </style>
           </style>
         </head>
         <body>
-          <div class="nav">
-            <div class="nav-links">
-              <a href="/" class="active">\u{1F4CA} Dashboard</a>
-              <a href="/kanban">\u{1F4CB} Kanban</a>
-              <a href="/config">\u2699\uFE0F Config</a>
-            </div>
-            <div>
-              <span id="connection-status" class="status idle">\u{1F50C} Connecting...</span>
-            </div>
-          </div>
-          
-          <!-- Key Metrics -->
-          <div class="grid-4">
-            <div class="metric-card">
-              <div class="metric-label">\u{1F916} Active Agents</div>
-              <div class="metric-value" id="active-agents">0</div>
-              <div class="metric-change positive">\u2191 2 from last hour</div>
-            </div>
-            <div class="metric-card">
-              <div class="metric-label">\u{1F4CB} Total Actions</div>
-              <div class="metric-value" id="total-actions">0</div>
-              <div class="metric-change positive">\u2191 12% increase</div>
-            </div>
-            <div class="metric-card">
-              <div class="metric-label">\u{1F41B} Bugs Found</div>
-              <div class="metric-value" id="bugs-found">0</div>
-              <div class="metric-change negative">\u2193 3 from yesterday</div>
-            </div>
-            <div class="metric-card">
-              <div class="metric-label">\u26A1 Success Rate</div>
-              <div class="metric-value" id="success-rate">0%</div>
-              <div class="metric-change positive">\u2191 5% improvement</div>
+          <div class="dashboard-container">
+            <header class="dashboard-header">
+              <h1 class="dashboard-title">\u{1F916} OpenQA Professional Dashboard</h1>
+              <nav class="nav">
+                <div class="nav-links">
+                  <a href="/" class="active">\u{1F4CA} Dashboard</a>
+                  <a href="/kanban">\u{1F4CB} Kanban</a>
+                  <a href="/config">\u2699\uFE0F Config</a>
+                </div>
+                <span id="connection-status" class="connection-status status idle">\u{1F50C} Connecting...</span>
+              </nav>
+            </header>
+            
+            <!-- Key Metrics -->
+            <div class="metrics-grid">
+              <div class="metric-card">
+                <div class="metric-header">
+                  <div class="metric-label">\u{1F916} Active Agents</div>
+                  <div class="metric-icon">\u{1F916}</div>
+                </div>
+                <div class="metric-value" id="active-agents">0</div>
+                <div class="metric-change positive">\u2191 2 from last hour</div>
+              </div>
+              <div class="metric-card">
+                <div class="metric-header">
+                  <div class="metric-label">\u{1F4CB} Total Actions</div>
+                  <div class="metric-icon">\u{1F4CB}</div>
+                </div>
+                <div class="metric-value" id="total-actions">0</div>
+                <div class="metric-change positive">\u2191 12% increase</div>
+              </div>
+              <div class="metric-card">
+                <div class="metric-header">
+                  <div class="metric-label">\u{1F41B} Bugs Found</div>
+                  <div class="metric-icon">\u{1F41B}</div>
+                </div>
+                <div class="metric-value" id="bugs-found">0</div>
+                <div class="metric-change negative">\u2193 3 from yesterday</div>
+              </div>
+              <div class="metric-card">
+                <div class="metric-header">
+                  <div class="metric-label">\u26A1 Success Rate</div>
+                  <div class="metric-icon">\u26A1</div>
+                </div>
+                <div class="metric-value" id="success-rate">0%</div>
+                <div class="metric-change positive">\u2191 5% improvement</div>
+              </div>
             </div>
-          </div>
 
           <!-- Charts and Hierarchy -->
-          <div class="grid-2">
+          <div class="main-grid">
             <div class="card">
               <div class="card-header">
                 <h2 class="card-title">\u{1F4C8} Performance Metrics</h2>
-              </div>
-              <div class="tabs">
-                <div class="tab active" onclick="switchTab('performance')">Performance</div>
-                <div class="tab" onclick="switchTab('activity')">Activity</div>
-                <div class="tab" onclick="switchTab('errors')">Error Rate</div>
+                <div class="tabs">
+                  <div class="tab active" onclick="switchTab('performance')">Performance</div>
+                  <div class="tab" onclick="switchTab('activity')">Activity</div>
+                  <div class="tab" onclick="switchTab('errors')">Error Rate</div>
+                </div>
               </div>
               <div class="chart-container">
                 <canvas id="performanceChart"></canvas>
@@ -610,36 +969,36 @@ async function startWebServer() {
           <div class="card">
             <div class="card-header">
               <h2 class="card-title">\u{1F916} Agent Details</h2>
-            </div>
-            <div class="tabs">
-              <div class="tab active" onclick="switchAgentTab('active')">Active Agents</div>
-              <div class="tab" onclick="switchAgentTab('specialists')">Specialists</div>
-              <div class="tab" onclick="switchAgentTab('performance')">Performance</div>
+              <div class="tabs">
+                <div class="tab active" onclick="switchAgentTab('active')">Active Agents</div>
+                <div class="tab" onclick="switchAgentTab('specialists')">Specialists</div>
+                <div class="tab" onclick="switchAgentTab('performance')">Performance</div>
+              </div>
             </div>
             <div id="active-agents-content" class="tab-content active">
               <div id="active-agents-list">
-                <p style="color: #64748b;">Loading agents...</p>
+                <p style="color: #9ca3af;">Loading agents...</p>
               </div>
             </div>
             <div id="specialists-content" class="tab-content">
               <div id="specialists-list">
-                <p style="color: #64748b;">No specialists active</p>
+                <p style="color: #9ca3af;">No specialists active</p>
               </div>
             </div>
             <div id="performance-content" class="tab-content">
               <div id="performance-metrics">
-                <p style="color: #64748b;">Performance data loading...</p>
+                <p style="color: #9ca3af;">Performance data loading...</p>
               </div>
             </div>
           </div>
 
           <!-- Activity and Interventions -->
-          <div class="grid-2">
+          <div class="main-grid">
             <div class="card">
               <div class="card-header">
                 <h2 class="card-title">\u26A1 Recent Activity</h2>
               </div>
-              <div id="recent-activities" style="max-height: 400px; overflow-y: auto;">
+              <div class="activity-feed" id="recent-activities">
                 <div class="activity-item">
                   <div>\u{1F504} Waiting for agent activity...</div>
                   <div class="activity-time">System ready</div>
@@ -651,20 +1010,20 @@ async function startWebServer() {
               <div class="card-header">
                 <h2 class="card-title">\u{1F6A8} Human Interventions</h2>
               </div>
-              <div id="interventions-list" style="max-height: 400px; overflow-y: auto;">
-                <p style="color: #64748b;">No interventions required</p>
+              <div class="activity-feed" id="interventions-list">
+                <p style="color: #9ca3af;">No interventions required</p>
               </div>
             </div>
           </div>
 
           <!-- Tasks and Issues -->
-          <div class="grid-2">
+          <div class="main-grid">
             <div class="card">
               <div class="card-header">
                 <h2 class="card-title">\u{1F4DD} Current Tasks</h2>
               </div>
-              <div id="current-tasks" style="max-height: 400px; overflow-y: auto;">
-                <p style="color: #64748b;">No active tasks</p>
+              <div class="activity-feed" id="current-tasks">
+                <p style="color: #9ca3af;">No active tasks</p>
               </div>
             </div>
             
@@ -672,40 +1031,8 @@ async function startWebServer() {
               <div class="card-header">
                 <h2 class="card-title">\u26A0\uFE0F Issues Encountered</h2>
               </div>
-              <div id="issues-list" style="max-height: 400px; overflow-y: auto;">
-                <p style="color: #64748b;">No issues</p>
-              </div>
-            </div>
-          </div>
-          
-          <div class="grid">
-            <div class="card">
-              <h2>\u{1F916} Active Agents</h2>
-              <div id="active-agents-list">
-                <p style="color: #64748b;">No active agents</p>
-              </div>
-            </div>
-            
-            <div class="card">
-              <h2>\u{1F6A8} Human Interventions</h2>
-              <div id="interventions-list">
-                <p style="color: #64748b;">No interventions required</p>
-              </div>
-            </div>
-          </div>
-          
-          <div class="grid">
-            <div class="card">
-              <h2>\u{1F4DD} Current Tasks</h2>
-              <div id="current-tasks">
-                <p style="color: #64748b;">No active tasks</p>
-              </div>
-            </div>
-            
-            <div class="card">
-              <h2>\u26A0\uFE0F Issues Encountered</h2>
-              <div id="issues-list">
-                <p style="color: #64748b;">No issues</p>
+              <div class="activity-feed" id="issues-list">
+                <p style="color: #9ca3af;">No issues</p>
               </div>
             </div>
           </div>
@@ -1334,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, () => {