seo-intel 1.5.0 → 1.5.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## 1.5.1 (2026-04-11)
+
+### Setup Wizard
+- Fixed Playwright detection on macOS — now checks correct browser cache paths instead of legacy node_modules location
+- Added persistent "Open Dashboard" link in wizard header, visible on all setup steps
+- Renamed floating helper card to "Agentic Installations" with extended per-runtime setup prompts
+- Cloud model cards now show live connection status (Connected via API key or OpenClaw gateway)
+- OpenClaw gateway model detection with authenticated `/v1/models` query
+
+### Extraction: LAN host model fix
+- Fixed LAN/fallback hosts checking for wrong model (used stale `OLLAMA_FALLBACK_MODEL` instead of project-selected model)
+- All Ollama hosts now use the project's configured extraction model consistently
+- Added `OLLAMA_HOSTS` support — comma-separated LAN hosts from setup wizard are picked up by extractor
+
+### Dashboard
+- Stealth toggle moved next to Crawl button (only affects crawl, not extract)
+- Analysis buttons (Analyze, Brief, Keywords, Templates) get subtle blue accent border
+- Visual separator between action and intelligence command groups
+
 ## 1.5.0 (2026-04-10)
 
 ### Export: dashboard data, not raw DB dumps

package/cli.js

@@ -69,19 +69,27 @@ function defaultSiteUrl(domain) {
 function resolveExtractionRuntime(config) {
   const primaryUrl = config?.crawl?.ollamaHost || process.env.OLLAMA_URL || 'http://localhost:11434';
   const primaryModel = config?.crawl?.extractionModel || process.env.OLLAMA_MODEL || 'gemma4:e4b';
-  const fallbackUrl = process.env.OLLAMA_FALLBACK_URL || '';
-  const fallbackModel = process.env.OLLAMA_FALLBACK_MODEL || primaryModel;
   const localhost = 'http://localhost:11434';
+  const norm = h => String(h || '').trim().replace(/\/+$/, '');
 
   const candidates = [
-    { host: String(primaryUrl).trim().replace(/\/+$/, ''), model: String(primaryModel).trim() || 'gemma4:e4b' },
+    { host: norm(primaryUrl), model: String(primaryModel).trim() || 'gemma4:e4b' },
   ];
 
-  if (fallbackUrl) {
-    candidates.push({
-      host: String(fallbackUrl).trim().replace(/\/+$/, ''),
-      model: String(fallbackModel).trim() || String(primaryModel).trim() || 'gemma4:e4b',
-    });
+  // Legacy single fallback — always use project-selected model, not OLLAMA_FALLBACK_MODEL
+  const fallbackUrl = norm(process.env.OLLAMA_FALLBACK_URL || '');
+  if (fallbackUrl && !candidates.some(c => c.host === fallbackUrl)) {
+    candidates.push({ host: fallbackUrl, model: String(primaryModel).trim() || 'gemma4:e4b' });
+  }
+
+  // OLLAMA_HOSTS — comma-separated LAN hosts from setup wizard
+  if (process.env.OLLAMA_HOSTS) {
+    for (const h of process.env.OLLAMA_HOSTS.split(',')) {
+      const host = norm(h);
+      if (host && !candidates.some(c => c.host === host)) {
+        candidates.push({ host, model: String(primaryModel).trim() || 'gemma4:e4b' });
+      }
+    }
   }
 
   if (!candidates.some(candidate => candidate.host === localhost)) {

package/extractor/qwen.js

@@ -24,16 +24,29 @@ function getConfiguredOllamaRoutes() {
   const primaryUrl = normalizeHost(process.env.OLLAMA_URL || DEFAULT_OLLAMA_URL) || DEFAULT_OLLAMA_URL;
   const primaryModel = String(process.env.OLLAMA_MODEL || DEFAULT_OLLAMA_MODEL).trim() || DEFAULT_OLLAMA_MODEL;
   const fallbackUrl = normalizeHost(process.env.OLLAMA_FALLBACK_URL || '');
-  const fallbackModel = String(process.env.OLLAMA_FALLBACK_MODEL || primaryModel).trim() || primaryModel;
+  // BUG FIX: fallback hosts MUST use the project-selected model (primaryModel),
+  // not a separate OLLAMA_FALLBACK_MODEL env var. The project config sets
+  // OLLAMA_MODEL to the user's choice — all hosts should respect that.
+  const fallbackModel = primaryModel;
 
   const candidates = [
     { label: 'primary', host: primaryUrl, model: primaryModel },
   ];
 
-  if (fallbackUrl) {
+  if (fallbackUrl && !candidates.some(r => r.host === normalizeHost(fallbackUrl))) {
     candidates.push({ label: 'fallback', host: fallbackUrl, model: fallbackModel });
   }
 
+  // Support OLLAMA_HOSTS — comma-separated list of additional LAN Ollama hosts
+  if (process.env.OLLAMA_HOSTS) {
+    for (const h of process.env.OLLAMA_HOSTS.split(',')) {
+      const host = normalizeHost(h);
+      if (host && !candidates.some(r => r.host === host)) {
+        candidates.push({ label: 'lan', host, model: primaryModel });
+      }
+    }
+  }
+
   if (!candidates.some(route => route.host === LOCALHOST_OLLAMA_URL)) {
     candidates.push({ label: 'localhost', host: LOCALHOST_OLLAMA_URL, model: primaryModel });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "seo-intel",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Local Ahrefs-style SEO competitor intelligence. Crawl → SQLite → cloud analysis.",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",

package/reports/generate-html.js

@@ -1466,6 +1466,12 @@ function buildHtmlTemplate(data, opts = {}) {
     .term-btn:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
     .term-btn:active { background: rgba(232,213,163,0.1); }
     .term-btn i { margin-right: 3px; font-size: 0.55rem; }
+    .term-btn-intel { border-color: rgba(96,165,250,0.2); }
+    .term-btn-intel:hover { border-color: rgba(96,165,250,0.6); color: rgba(150,200,255,0.9); }
+    .term-btn-intel:active { background: rgba(96,165,250,0.08); }
+    .term-stealth { display:inline-flex; align-items:center; gap:4px; font-size:0.58rem; color:var(--text-muted); cursor:pointer; user-select:none; margin-left:2px; padding:2px 6px; border-radius:4px; border:1px solid transparent; transition:all 0.15s; }
+    .term-stealth:hover { border-color: rgba(124,109,235,0.3); color: var(--text-secondary); }
+    .term-stealth input[type="checkbox"] { accent-color: var(--accent-purple,#7c6deb); width:12px; height:12px; cursor:pointer; }
 
     /* ─── Terminal + Export split layout ───────────────────────────────── */
     .term-split {
@@ -2122,10 +2128,6 @@ function buildHtmlTemplate(data, opts = {}) {
       <button class="es-btn es-btn-restart" id="btnRestart${suffix}" onclick="restartServer()">
         <i class="fa-solid fa-rotate-right"></i> Restart
       </button>
-      <label class="es-stealth-toggle">
-        <input type="checkbox" id="stealthToggle${suffix}"${extractionStatus.liveProgress?.stealth ? ' checked' : ''}>
-        <i class="fa-solid fa-user-ninja"></i> Stealth
-      </label>
     </div>
     </div>
   </div>
@@ -2147,11 +2149,13 @@ function buildHtmlTemplate(data, opts = {}) {
         <div style="padding:8px 12px;background:#111;border-bottom:1px solid var(--border-subtle);display:flex;flex-wrap:wrap;gap:6px;align-items:center;">
           <span style="font-size:0.6rem;color:var(--text-muted);margin-right:4px;"><i class="fa-solid fa-play" style="margin-right:3px;"></i>Run:</span>
           <button class="term-btn" data-cmd="crawl" data-project="${project}"><i class="fa-solid fa-spider"></i> Crawl</button>
+          <label class="term-stealth"><input type="checkbox" id="stealthToggle${suffix}"${extractionStatus.liveProgress?.stealth ? ' checked' : ''}><i class="fa-solid fa-user-ninja"></i></label>
           ${pro ? `<button class="term-btn" data-cmd="extract" data-project="${project}"><i class="fa-solid fa-brain"></i> Extract</button>
-          <button class="term-btn" data-cmd="analyze" data-project="${project}"><i class="fa-solid fa-chart-column"></i> Analyze</button>
-          <button class="term-btn" data-cmd="brief" data-project="${project}"><i class="fa-solid fa-file-lines"></i> Brief</button>
-          <button class="term-btn" data-cmd="keywords" data-project="${project}"><i class="fa-solid fa-key"></i> Keywords</button>
-          <button class="term-btn" data-cmd="templates" data-project="${project}"><i class="fa-solid fa-clone"></i> Templates</button>` : ''}
+          <span style="width:1px;height:16px;background:var(--border-subtle);margin:0 2px;"></span>
+          <button class="term-btn term-btn-intel" data-cmd="analyze" data-project="${project}"><i class="fa-solid fa-chart-column"></i> Analyze</button>
+          <button class="term-btn term-btn-intel" data-cmd="brief" data-project="${project}"><i class="fa-solid fa-file-lines"></i> Brief</button>
+          <button class="term-btn term-btn-intel" data-cmd="keywords" data-project="${project}"><i class="fa-solid fa-key"></i> Keywords</button>
+          <button class="term-btn term-btn-intel" data-cmd="templates" data-project="${project}"><i class="fa-solid fa-clone"></i> Templates</button>` : ''}
           <button class="term-btn" data-cmd="status" data-project=""><i class="fa-solid fa-circle-info"></i> Status</button>
           <button class="term-btn" data-cmd="guide" data-project="${project}"><i class="fa-solid fa-map"></i> Guide</button>
           <button class="term-btn" data-cmd="setup" data-project="" style="margin-left:auto;border-color:rgba(232,213,163,0.25);"><i class="fa-solid fa-gear"></i> Setup</button>
@@ -2368,10 +2372,12 @@ function buildHtmlTemplate(data, opts = {}) {
         const proj = btn.getAttribute('data-project');
         const scope = btn.getAttribute('data-scope');
         var extra = scope ? { scope: scope } : {};
-        // Crawl/extract: read stealth toggle + update status bar
-        if (cmd === 'crawl' || cmd === 'extract') {
+        // Crawl: read stealth toggle; Crawl/extract: update status bar
+        if (cmd === 'crawl') {
           var stealthEl = btn.closest('.project-panel')?.querySelector('[id^="stealthToggle"]') || document.getElementById('stealthToggle' + suffix);
           if (stealthEl?.checked) extra.stealth = true;
+        }
+        if (cmd === 'crawl' || cmd === 'extract') {
           if (window._setButtonsState) window._setButtonsState(true, cmd);
           if (window._startPolling) window._startPolling();
         }
@@ -4057,9 +4063,12 @@ function buildHtmlTemplate(data, opts = {}) {
       let pollTimer = null;
 
       window.startJob = function(command, proj) {
-        var stealth = document.getElementById('stealthToggle' + sfx)?.checked || false;
         var extra = {};
-        if (stealth) extra.stealth = true;
+        // Stealth only applies to crawl — extract has no network
+        if (command === 'crawl') {
+          var stealth = document.getElementById('stealthToggle' + sfx)?.checked || false;
+          if (stealth) extra.stealth = true;
+        }
 
         // Route through terminal for visible output
         if (window._terminalRun) {
@@ -5279,9 +5288,12 @@ function buildMultiHtmlTemplate(allProjectData) {
 
       window.startJob = function(command, proj) {
         var sfx = '-' + proj;
-        var stealth = document.getElementById('stealthToggle' + sfx)?.checked || false;
         var extra = {};
-        if (stealth) extra.stealth = true;
+        // Stealth only applies to crawl — extract has no network
+        if (command === 'crawl') {
+          var stealth = document.getElementById('stealthToggle' + sfx)?.checked || false;
+          if (stealth) extra.stealth = true;
+        }
 
         // Route through terminal for visible output
         if (window._terminalRun) {

package/setup/checks.js

@@ -10,6 +10,7 @@ import { execSync, spawnSync } from 'child_process';
 import { existsSync, readFileSync, readdirSync } from 'fs';
 import { join, dirname } from 'path';
 import { fileURLToPath } from 'url';
+import { createRequire } from 'module';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const ROOT = join(__dirname, '..');
@@ -141,24 +142,35 @@ export function checkPlaywright() {
   // Check if Chromium binary is actually available
   let chromiumReady = false;
   try {
-    // Playwright stores browser paths in its package
-    const browserPath = join(pkgPath, '.local-browsers');
-    if (existsSync(browserPath)) {
-      const browsers = readdirSync(browserPath);
-      chromiumReady = browsers.some(b => b.toLowerCase().includes('chromium'));
+    // 1. Shared cache (macOS: ~/Library/Caches/ms-playwright, Linux: ~/.cache/ms-playwright)
+    const home = process.env.HOME || process.env.USERPROFILE || '';
+    const cachePaths = [
+      join(home, 'Library', 'Caches', 'ms-playwright'),           // macOS
+      join(home, '.cache', 'ms-playwright'),                       // Linux
+      join(process.env.LOCALAPPDATA || '', 'ms-playwright'),       // Windows
+      join(pkgPath, '.local-browsers'),                            // legacy / bundled
+    ];
+    for (const cachePath of cachePaths) {
+      if (existsSync(cachePath)) {
+        try {
+          const browsers = readdirSync(cachePath);
+          if (browsers.some(b => b.toLowerCase().includes('chromium'))) {
+            chromiumReady = true;
+            break;
+          }
+        } catch { /* permission error, skip */ }
+      }
     }
-    // Alternative check: playwright's own registry
+    // 2. Fallback: require playwright and check chromium executablePath
     if (!chromiumReady) {
-      const result = spawnSync('npx', ['playwright', 'install', '--dry-run'], {
-        encoding: 'utf8',
-        timeout: 10000,
-        stdio: ['pipe', 'pipe', 'pipe'],
-      });
-      // If dry-run shows chromium is already installed, it's ready
-      chromiumReady = result.status === 0 && !result.stdout.includes('chromium');
+      try {
+        const req = createRequire(join(ROOT, 'package.json'));
+        const pw = req('playwright');
+        const execPath = pw.chromium?.executablePath?.();
+        if (execPath && existsSync(execPath)) chromiumReady = true;
+      } catch { /* playwright may not be requireable */ }
     }
   } catch {
-    // If we can't determine, assume it needs install
     chromiumReady = false;
   }
 
@@ -443,6 +455,7 @@ export function checkOpenClaw() {
     hasSkillsDir: false,
     skillsPath: null,
     canAgentSetup: false,
+    gatewayModels: [],   // model IDs available via OpenClaw gateway
   };
 
   // 1. Check if openclaw binary exists
@@ -456,10 +469,25 @@ export function checkOpenClaw() {
     result.version = match ? match[1] : ver;
   } catch { /* ok */ }
 
-  // 3. Check if gateway is running (quick HTTP ping)
+  // 3. Check if gateway is running + fetch available models
+  // Read gateway auth token from config
+  let gwToken = '';
+  try {
+    const homeDir = process.env.HOME || process.env.USERPROFILE;
+    const ocConf = JSON.parse(readFileSync(join(homeDir, '.openclaw', 'openclaw.json'), 'utf8'));
+    gwToken = ocConf?.gateway?.auth?.token || '';
+  } catch { /* no config */ }
+
   try {
-    execSync('curl -s --max-time 2 http://127.0.0.1:18789/v1/models >/dev/null 2>&1', { timeout: 5000 });
+    const authHeader = gwToken ? `-H "Authorization: Bearer ${gwToken}"` : '';
+    const raw = execSync(`curl -s --max-time 2 ${authHeader} http://127.0.0.1:18789/v1/models 2>/dev/null`, { timeout: 5000 }).toString().trim();
     result.gatewayRunning = true;
+    try {
+      const parsed = JSON.parse(raw);
+      if (parsed?.data && Array.isArray(parsed.data)) {
+        result.gatewayModels = parsed.data.map(m => m.id).filter(Boolean);
+      }
+    } catch { /* json parse fail — gateway running but no model list */ }
   } catch {
     result.gatewayRunning = false;
   }

package/setup/web-routes.js

@@ -296,6 +296,10 @@ async function handleModels(req, res) {
       ...models,
       gpu: status.vram,
       ollama: status.ollama,
+      openclaw: {
+        gatewayRunning: status.openclaw?.gatewayRunning || false,
+        gatewayModels: status.openclaw?.gatewayModels || [],
+      },
     });
   } catch (err) {
     jsonResponse(res, { error: err.message }, 500);

package/setup/wizard.html

@@ -1198,7 +1198,10 @@ input::placeholder {
 <div class="wizard-header">
   <h1>SEO Intel</h1>
   <div class="subtitle">Setup Wizard</div>
-  <a href="http://localhost:3000/?autorun=setup-classic" title="Run setup in Terminal instead" style="position:absolute;top:14px;right:18px;font-size:0.68rem;color:var(--color-muted,#888);text-decoration:none;opacity:0.7;transition:opacity 0.15s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.7'"><i class="fa-solid fa-terminal"></i> Terminal setup</a>
+  <div style="position:absolute;top:14px;right:18px;display:flex;gap:14px;align-items:center;">
+    <a href="/" title="Open Dashboard" style="font-size:0.68rem;color:var(--color-success,#8ecba8);text-decoration:none;opacity:0.8;transition:opacity 0.15s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.8'"><i class="fa-solid fa-chart-line"></i> Dashboard</a>
+    <a href="http://localhost:3000/?autorun=setup-classic" title="Run setup in Terminal instead" style="font-size:0.68rem;color:var(--color-muted,#888);text-decoration:none;opacity:0.7;transition:opacity 0.15s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.7'"><i class="fa-solid fa-terminal"></i> Terminal setup</a>
+  </div>
 </div>
 
 <!-- ═══════════════════════════════════════════════════════════════════════
@@ -1894,7 +1897,7 @@ input::placeholder {
       <circle cx="14" cy="14" r="13" stroke="var(--accent-purple)" stroke-width="1.5" opacity="0.6"/>
       <path d="M9 12c0-2.8 2.2-5 5-5s5 2.2 5 5c0 1.8-1 3.4-2.4 4.3L18 20H10l1.4-3.7C10 15.4 9 13.8 9 12z" fill="var(--accent-purple)" opacity="0.8"/>
     </svg>
-    <span style="font-size:0.92rem; font-weight:600; color:var(--text-primary);">OpenClaw</span>
+    <span style="font-size:0.92rem; font-weight:600; color:var(--text-primary);">Agentic Installations</span>
   </div>
 
   <!-- Tab switcher: Agentic Setup vs Cloud Models -->
@@ -1925,7 +1928,7 @@ input::placeholder {
         <button class="btn btn-sm" style="margin-left:auto; padding:2px 6px; font-size:0.55rem;" onclick="navigator.clipboard.writeText('clawhub install ukkometa/seo-intel');this.textContent='OK';setTimeout(()=>this.textContent='Copy',1200);">Copy</button>
       </div>
       <div style="position:relative; padding:7px 9px; background:rgba(10,10,10,0.5); border:1px solid var(--border-subtle); border-radius:var(--radius); font-family:var(--font-mono); font-size:0.62rem; color:var(--text-secondary); line-height:1.5;">
-        <div id="genie-oc-prompt">Set up SEO Intel on my machine. Check deps, install Ollama, recommend a model, configure a project, run a test crawl.</div>
+        <div id="genie-oc-prompt">Set up SEO Intel (npm package: seo-intel) on my machine. Steps: 1) Verify Node.js ≥22.5 and npm are installed. 2) Install Ollama and pull the gemma4:e4b model (default extraction engine, ~4GB). 3) Run `seo-intel setup` to create a project config — ask me for my website URL and up to 3 competitor URLs. 4) Run a test crawl with `seo-intel crawl &lt;project&gt;` to verify everything works. 5) Run `seo-intel extract &lt;project&gt;` to test local AI extraction. Report any errors with full context.</div>
         <button class="btn btn-sm" style="position:absolute; top:5px; right:5px; padding:2px 5px; font-size:0.52rem;" onclick="navigator.clipboard.writeText(document.getElementById('genie-oc-prompt').textContent.trim());this.textContent='OK';setTimeout(()=>this.textContent='Copy',1200);">Copy</button>
       </div>
       <div style="display:flex; gap:6px; margin-top:10px;">
@@ -1936,21 +1939,21 @@ input::placeholder {
 
     <div id="genieRuntime-claudecode" class="genie-runtime-panel" style="display:none;">
       <div style="position:relative; padding:7px 9px; background:rgba(10,10,10,0.5); border:1px solid var(--border-subtle); border-radius:var(--radius); font-family:var(--font-mono); font-size:0.62rem; color:var(--text-secondary); line-height:1.5;">
-        <div>Set up seo-intel: check Node 22.5+, install Ollama, pull gemma4:e4b, create config, run crawl.</div>
+        <div>Set up the npm package `seo-intel` on this machine. Requirements: Node.js ≥22.5, Ollama with gemma4:e4b model (~4GB download). Create a project config for my website — ask me for my URL and competitor domains. Then run a test crawl (`seo-intel crawl &lt;project&gt;`) and extraction (`seo-intel extract &lt;project&gt;`). The tool stores data in SQLite locally. If Ollama isn't installed, install it from ollama.com. After setup, open the dashboard with `seo-intel serve`.</div>
         <button class="btn btn-sm" style="position:absolute; top:5px; right:5px; padding:2px 5px; font-size:0.52rem;" onclick="navigator.clipboard.writeText(this.previousElementSibling.textContent.trim());this.textContent='OK';setTimeout(()=>this.textContent='Copy',1200);">Copy</button>
       </div>
     </div>
 
     <div id="genieRuntime-codex" class="genie-runtime-panel" style="display:none;">
       <div style="position:relative; padding:7px 9px; background:rgba(10,10,10,0.5); border:1px solid var(--border-subtle); border-radius:var(--radius); font-family:var(--font-mono); font-size:0.62rem; color:var(--text-secondary); line-height:1.5;">
-        <div>Install seo-intel deps (Node 22.5+, Ollama, gemma4:e4b), create project config, run: seo-intel crawl myproject. Full disk access.</div>
+        <div>Install and configure the `seo-intel` npm package. Needs: Node.js ≥22.5, Ollama running locally with `gemma4:e4b` pulled. Create a JSON config at configs/&lt;project&gt;.json with target URL + competitor URLs (ask me). Run the full pipeline: `seo-intel crawl &lt;project&gt;` → `seo-intel extract &lt;project&gt;` → `seo-intel serve` to open the dashboard. Needs full disk access for Playwright browser automation.</div>
         <button class="btn btn-sm" style="position:absolute; top:5px; right:5px; padding:2px 5px; font-size:0.52rem;" onclick="navigator.clipboard.writeText(this.previousElementSibling.textContent.trim());this.textContent='OK';setTimeout(()=>this.textContent='Copy',1200);">Copy</button>
       </div>
     </div>
 
     <div id="genieRuntime-perplexity" class="genie-runtime-panel" style="display:none;">
       <div style="position:relative; padding:7px 9px; background:rgba(10,10,10,0.5); border:1px solid var(--border-subtle); border-radius:var(--radius); font-family:var(--font-mono); font-size:0.62rem; color:var(--text-secondary); line-height:1.5;">
-        <div>Help me set up SEO Intel: install Node.js 22.5+, Ollama, download Gemma 4 model, create config for my website. Ask for my URL.</div>
+        <div>I want to install SEO Intel (seo-intel on npm), a local-first SEO competitor analysis tool. Walk me through: 1) Installing Node.js 22.5+ if I don't have it. 2) Installing Ollama and downloading the Gemma 4 e4b model for AI extraction. 3) Running `npx seo-intel setup` to configure my first project. I need to provide my website URL and competitor URLs. 4) Testing the crawl pipeline. Ask me for my website URL to get started.</div>
         <button class="btn btn-sm" style="position:absolute; top:5px; right:5px; padding:2px 5px; font-size:0.52rem;" onclick="navigator.clipboard.writeText(this.previousElementSibling.textContent.trim());this.textContent='OK';setTimeout(()=>this.textContent='Copy',1200);">Copy</button>
       </div>
     </div>
@@ -1959,21 +1962,15 @@ input::placeholder {
   <!-- Cloud Models tab -->
   <div id="genieCloud" style="display:none;">
     <p style="font-size:0.75rem; color:var(--text-muted); line-height:1.6; margin-bottom:12px;">
-      Route analysis through frontier models. OpenClaw manages API keys and OAuth automatically.
+      Cloud frontier models for competitive analysis. Add API keys in the Models step, or use OpenClaw for automatic key management.
     </p>
     <div style="font-size:0.72rem; color:var(--text-secondary);">
       <div style="display:flex; align-items:center; gap:6px; margin-bottom:6px;">
-        <i class="fa-solid fa-check" style="color:var(--accent-purple); font-size:0.62rem; width:12px;"></i> Claude Opus 4.6
-      </div>
-      <div style="display:flex; align-items:center; gap:6px; margin-bottom:6px;">
-        <i class="fa-solid fa-check" style="color:var(--accent-purple); font-size:0.62rem; width:12px;"></i> Gemini 3.1 Pro
-      </div>
-      <div style="display:flex; align-items:center; gap:6px; margin-bottom:6px;">
-        <i class="fa-solid fa-check" style="color:var(--accent-purple); font-size:0.62rem; width:12px;"></i> GPT-5.4
+        <i class="fa-solid fa-spinner fa-spin-pulse" style="color:var(--text-muted); font-size:0.62rem; width:12px;"></i> <span style="color:var(--text-muted);">Checking connections...</span>
       </div>
     </div>
     <p style="font-size:0.65rem; color:var(--text-muted); line-height:1.5; margin-top:10px;">
-      No .env keys needed. OAuth-based model access means the pipeline test may show "no API key" — this is normal.
+      Set up API keys in the <strong>Models &amp; Auth</strong> step, or use OpenClaw to skip key management entirely.
     </p>
   </div>
 </div>
@@ -2332,6 +2329,7 @@ input::placeholder {
       state.modelData = await API.get('/api/setup/models');
       renderExtractionModels();
       renderAnalysisModels();
+      renderCloudModelStatus();
     } catch (err) {
       extDiv.innerHTML = `<div style="color:var(--color-danger); font-size:0.75rem;">Failed: ${err.message}</div>`;
       anaDiv.innerHTML = extDiv.innerHTML;
@@ -2493,6 +2491,76 @@ input::placeholder {
     }
   }
 
+  function renderCloudModelStatus() {
+    const cloudModels = (state.modelData?.allAnalysis || []).filter(m => m.type === 'cloud');
+    const gwModels = state.modelData?.openclaw?.gatewayModels || [];
+    const gwRunning = state.modelData?.openclaw?.gatewayRunning || false;
+
+    // Determine connection status per cloud model
+    // A model is "connected" if: .env key exists OR OpenClaw gateway is active (routes all cloud models)
+    function isConnected(cm) {
+      if (cm.configured) return { connected: true, via: 'key' };
+      // If OpenClaw gateway is running with models, all cloud models are available through it
+      if (gwRunning && gwModels.length > 0) return { connected: true, via: 'openclaw' };
+      return { connected: false };
+    }
+
+    // Mark cloud model cards with visible connection badges
+    const cloudCards = document.querySelectorAll('#cloudAnalysisModels .cloud-model');
+    cloudCards.forEach(card => {
+      const modelId = card.dataset.model;
+      const cm = cloudModels.find(m => m.id === modelId);
+      const old = card.querySelector('.cloud-status-badge');
+      if (old) old.remove();
+      if (!cm) return;
+
+      const status = isConnected(cm);
+      const badge = document.createElement('div');
+      badge.className = 'cloud-status-badge';
+
+      if (status.connected) {
+        const viaLabel = status.via === 'openclaw' ? 'via OpenClaw' : 'API key set';
+        badge.innerHTML = `<span style="display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:4px;background:rgba(142,203,168,0.15);border:1px solid rgba(142,203,168,0.3);font-size:0.6rem;font-weight:600;color:var(--color-success);letter-spacing:0.02em;"><i class="fa-solid fa-circle-check"></i> Connected <span style="font-weight:400;opacity:0.8;">— ${viaLabel}</span></span>`;
+        badge.style.cssText = 'margin-top:8px;';
+        card.style.borderColor = 'rgba(142,203,168,0.3)';
+      } else {
+        badge.innerHTML = `<span style="display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:4px;background:rgba(255,255,255,0.03);border:1px solid var(--border-subtle);font-size:0.6rem;color:var(--text-muted);"><i class="fa-solid fa-circle-xmark"></i> No API key</span>`;
+        badge.style.cssText = 'margin-top:8px;';
+        card.style.borderColor = '';
+      }
+      card.appendChild(badge);
+    });
+
+    // Update the genie Cloud Models tab with live status
+    const genieCloud = document.getElementById('genieCloud');
+    if (genieCloud) {
+      const existingList = genieCloud.querySelector('div[style*="font-size:0.72rem"]');
+      if (!existingList) return;
+
+      let html = '<div style="font-size:0.72rem; color:var(--text-secondary);">';
+      for (const cm of cloudModels) {
+        const status = isConnected(cm);
+        if (status.connected) {
+          const via = status.via === 'openclaw' ? ' <span style="font-size:0.58rem;color:var(--text-muted);">via OpenClaw</span>' : '';
+          html += `<div style="display:flex;align-items:center;gap:6px;margin-bottom:6px;">
+            <i class="fa-solid fa-circle-check" style="color:var(--color-success);font-size:0.62rem;width:12px;"></i> ${cm.name}${via}
+          </div>`;
+        } else {
+          html += `<div style="display:flex;align-items:center;gap:6px;margin-bottom:6px;">
+            <i class="fa-solid fa-circle-xmark" style="color:var(--text-muted);font-size:0.62rem;width:12px;"></i> <span style="color:var(--text-muted);">${cm.name}</span>
+          </div>`;
+        }
+      }
+      if (gwRunning) {
+        html += `<div style="margin-top:8px;padding:6px 8px;background:rgba(124,109,235,0.08);border:1px solid rgba(124,109,235,0.2);border-radius:var(--radius);font-size:0.6rem;color:var(--accent-purple);">
+          <i class="fa-solid fa-plug" style="margin-right:4px;"></i> OpenClaw gateway active — ${gwModels.length} model(s)
+        </div>`;
+      }
+      html += '</div>';
+      existingList.outerHTML = html;
+    }
+  }
+
   function selectAnalysisModel(id) {
     state.selectedAnalysis = id;
     document.querySelectorAll('#analysisModels .model-radio-card').forEach(c => {
@@ -3613,6 +3681,8 @@ input::placeholder {
       const data = await res.json();
       if (!res.ok) throw new Error(data.error || 'Save failed');
       if (saveStatus) { saveStatus.textContent = '✓ Saved to .env'; saveStatus.style.color = 'var(--color-success)'; }
+      // Refresh model data to update cloud connection status
+      try { state.modelData = await API.get('/api/setup/models'); renderCloudModelStatus(); } catch {}
     } catch (err) {
       if (saveStatus) { saveStatus.textContent = err.message; saveStatus.style.color = 'var(--color-danger)'; }
     }