skopix 2.0.96 → 2.0.98

package/cli/commands/agent.js

@@ -114,6 +114,10 @@ export async function agentCommand(options) {
   console.log('');
   console.log('  Machine : ' + chalk.white(machine));
   console.log('  Server  : ' + chalk.white(serverUrl));
+  const hasDisplay = process.platform !== 'linux' || !!process.env.DISPLAY || !!process.env.WAYLAND_DISPLAY;
+  if (!hasDisplay) {
+    console.log(chalk.yellow('  ⚠ No display detected — headless only (replay/suites work, recording/debug require a display)'));
+  }
   console.log('');
 
   // Authenticate to identify this agent with the correct user
@@ -172,7 +176,9 @@ export async function agentCommand(options) {
 
     ws.addEventListener('open', () => {
       reconnectDelay = 2000;
-      ws.send(JSON.stringify({ type: 'register', agentId, name: userName, machine, userId }));
+      // Detect if this machine has a display (headed browser capability)
+      const hasDisplay = process.platform !== 'linux' || !!process.env.DISPLAY || !!process.env.WAYLAND_DISPLAY;
+      ws.send(JSON.stringify({ type: 'register', agentId, name: userName, machine, userId, hasDisplay }));
       console.log(chalk.green('  ✔ Connected — waiting for jobs\n'));
     });
 
@@ -184,6 +190,7 @@ export async function agentCommand(options) {
       if (msg.type === 'ping') { ws.send(JSON.stringify({ type: 'pong' })); return; }
       if (msg.type === 'record') { await handleRecord(msg); return; }
       if (msg.type === 'replay') { await handleReplay(msg); return; }
+      if (msg.type === 'debug-record') { await handleDebugRecord(msg); return; }
     });
 
     ws.addEventListener('close', () => {
@@ -374,6 +381,103 @@ export async function agentCommand(options) {
     }
   }
 
+  // ── DEBUG-RECORD JOB ────────────────────────────────────────────────────────
+  // Replays steps to a debug point on this agent (which has a display),
+  // then opens the recorder so user can add new steps from that state.
+  async function handleDebugRecord(msg) {
+    const { runId, recordingId, replaySteps, startUrl, env: jobEnv } = msg;
+    console.log(chalk.cyan('  ⏸ Debug replay: ') + chalk.white(replaySteps.length + ' steps to debug point'));
+
+    const sendRun = (data) => {
+      try { ws.send(JSON.stringify({ type: 'runUpdate', runId, data })); } catch {}
+    };
+    const sendRec = (data) => {
+      try { ws.send(JSON.stringify({ type: 'recordingUpdate', recordingId, data })); } catch {}
+    };
+
+    sendRun({ type: 'stdout', text: '' });
+    sendRun({ type: 'stdout', text: '  Replaying ' + replaySteps.length + ' steps to reach debug point...' });
+    sendRun({ type: 'stdout', text: '━'.repeat(60) });
+
+    try {
+      const { chromium } = await import('playwright');
+      const browser = await chromium.launch({ headless: false, args: ['--no-sandbox', '--disable-blink-features=AutomationControlled', '--allow-insecure-localhost'] });
+      const ctx = await browser.newContext({ viewport: { width: 1280, height: 800 } });
+      const page = await ctx.newPage();
+
+      if (startUrl) {
+        await page.goto(startUrl, { waitUntil: 'domcontentloaded', timeout: 30000 });
+        await page.waitForTimeout(1000);
+      }
+
+      // Replay each step
+      let stepNum = 0;
+      for (const step of replaySteps) {
+        stepNum++;
+        sendRun({ type: 'stdout', text: '  [' + stepNum + '/' + replaySteps.length + '] ' + (step.action || '').toUpperCase() + ' — ' + (step.description || step.selector || '') });
+        try {
+          const sel = step.stableSelector || step.selector;
+          await executeStep(step, sel, page, { url: startUrl });
+          sendRun({ type: 'stdout', text: chalk.green ? '✓ Done' : '✓ Done' });
+        } catch (err) {
+          sendRun({ type: 'stdout', text: '✖ FAILED: ' + err.message });
+          sendRun({ type: 'done', exitCode: 1, status: 'failed' });
+          sendRun({ type: 'stdout', text: '✗ Replay failed — could not reach debug point' });
+          await browser.close().catch(() => {});
+          ws.send(JSON.stringify({ type: 'jobDone', runId }));
+          return;
+        }
+      }
+
+      sendRun({ type: 'stdout', text: '' });
+      sendRun({ type: 'stdout', text: '  ✔ Reached debug point — starting recorder' });
+
+      // Now start the recorder from this browser state
+      const screenshotDir = path.join(os.homedir(), '.skopix', 'recordings', recordingId);
+      await fs.ensureDir(screenshotDir);
+
+      const recorderPath = path.resolve(path.dirname(new URL(import.meta.url).pathname), '..', '..', 'core', 'recorder.js');
+      const { spawn } = await import('child_process');
+      const child = spawn('node', [recorderPath, startUrl || '', recordingId, screenshotDir], { stdio: ['pipe', 'pipe', 'pipe'] });
+
+      child.stdout.on('data', (chunk) => {
+        chunk.toString().split('\n').filter(Boolean).forEach(line => {
+          try {
+            const parsed = JSON.parse(line);
+            sendRec(parsed);
+            if (parsed.type === 'step') process.stdout.write(chalk.cyan('    ⏺ ') + (parsed.step?.action || '') + '\n');
+            if (parsed.type === 'done') console.log(chalk.green('  ✔ Debug recording done'));
+          } catch {}
+        });
+      });
+
+      child.stderr.on('data', (chunk) => { sendRec({ type: 'error', message: chunk.toString().trim().slice(0, 200) }); });
+      child.on('close', () => {
+        sendRec({ type: 'stopped' });
+        browser.close().catch(() => {});
+        ws.send(JSON.stringify({ type: 'jobDone', runId }));
+        console.log(chalk.cyan('  ◆ Waiting for jobs\n'));
+      });
+
+      // Listen for stop signal
+      const stopHandler = (event) => {
+        let m; try { m = JSON.parse(event.data); } catch { return; }
+        if (m.type === 'stopRecord' && m.recordingId === recordingId) {
+          try { child.stdin.write('stop\n'); } catch {}
+          ws.removeEventListener('message', stopHandler);
+        }
+      };
+      ws.addEventListener('message', stopHandler);
+
+    } catch (err) {
+      console.error(chalk.red('  ✖ Debug error: ' + err.message));
+      sendRun({ type: 'stdout', text: '✖ Debug replay error: ' + err.message });
+      sendRun({ type: 'done', exitCode: 1, status: 'failed' });
+      sendRun({ type: 'stdout', text: '<span style="color:var(--red)">✗ Replay failed — could not reach debug point</span>' });
+      ws.send(JSON.stringify({ type: 'jobDone', runId }));
+    }
+  }
+
   // ── HELPERS ────────────────────────────────────────────────────────────────
   function sanitiseSelector(sel) {
     if (!sel) return sel;

package/cli/commands/dashboard.js

@@ -31,16 +31,19 @@ export async function dashboardCommand(options) {
 
   // ── AGENT REGISTRY ────────────────────────────────────────────────────────
   // Tracks connected skopix agents (teammates' machines that do browser work)
-  const agents = new Map(); // agentId -> { id, name, machine, userId, ws, status, currentJob, connectedAt }
+  const agents = new Map(); // agentId -> { id, name, machine, userId, ws, status, currentJob, connectedAt, hasDisplay }
 
-  function getAvailableAgents() {
-    return [...agents.values()].filter(a => a.status === 'idle' && a.ws.readyState === 1);
+  function getAvailableAgents(requireDisplay) {
+    return [...agents.values()].filter(a => {
+      if (a.status !== 'idle' || a.ws.readyState !== 1) return false;
+      if (requireDisplay && !a.hasDisplay) return false;
+      return true;
+    });
   }
 
-  function getLeastBusyAgent(preferUserId) {
-    const available = getAvailableAgents();
+  function getLeastBusyAgent(preferUserId, requireDisplay) {
+    const available = getAvailableAgents(requireDisplay);
     if (!available.length) return null;
-    // Prefer the agent belonging to the requesting user
     const mine = available.find(a => a.userId === preferUserId);
     if (mine) return mine;
     return available[0];
@@ -1045,6 +1048,7 @@ export async function dashboardCommand(options) {
         const list = [...agents.values()].map(a => ({
           id: a.id, name: a.name, machine: a.machine, userId: a.userId,
           status: a.status, currentJob: a.currentJob || null, connectedAt: a.connectedAt,
+          hasDisplay: a.hasDisplay !== false,
         }));
         sendJSON(res, 200, list);
         return;
@@ -1067,12 +1071,12 @@ export async function dashboardCommand(options) {
         const config = JSON.parse(body);
         if (!config.url) { sendJSON(res, 400, { error: 'url is required' }); return; }
 
-        // In team mode, dispatch to an agent if available
+        // In team mode, dispatch to a headed agent (needs display for recording)
         const userId = currentUser?.id || null;
-        const agent = teamMode ? getLeastBusyAgent(userId) : null;
+        const agent = teamMode ? getLeastBusyAgent(userId, true) : null;
 
         if (teamMode && !agent) {
-          sendJSON(res, 503, { error: 'No agent connected. Run "skopix agent --server ' + (req.headers.host || 'localhost:9000') + '" on your machine first.' });
+          sendJSON(res, 503, { error: 'No agent with a display connected. Run "skopix agent --server ' + (req.headers.host || 'localhost:9000') + '" on your local machine first.' });
           return;
         }
 
@@ -1245,6 +1249,33 @@ export async function dashboardCommand(options) {
         const broadcast = (line) => { run.output.push(line); run.listeners.forEach(l => l(line)); };
         const broadcastRec = (line) => { recording.output.push(line); recording.listeners.forEach(l => l(line)); };
 
+        // In team mode, dispatch to a headed agent — never run locally on the server
+        if (teamMode) {
+          const headedAgent = getLeastBusyAgent(currentUser?.id, true);
+          if (!headedAgent) {
+            sendJSON(res, 503, { error: 'No agent with a display connected. Run "skopix agent --server http://' + (req.headers.host || 'localhost:9000') + '" on your local machine first to use debug mode.' });
+            activeRuns.delete(runId);
+            activeRecordings.delete(recordingId);
+            return;
+          }
+          // Dispatch to the headed agent
+          headedAgent.status = 'recording';
+          headedAgent.currentJob = { type: 'debug-record', runId, recordingId };
+          broadcastAgentList();
+          sendToAgent(headedAgent, {
+            type: 'debug-record',
+            runId,
+            recordingId,
+            replaySteps,
+            startUrl: test.url,
+            env: { ...process.env, ...(await resolveUserSecretsEnv(currentUser?.id, teamMode) || {}) },
+          });
+          sendJSON(res, 200, { runId, recordingId, agent: { id: headedAgent.id, name: headedAgent.name } });
+          return;
+        }
+
+        // Solo mode — run locally
+        sendJSON(res, 200, { runId, recordingId });
         // Start the debug session asynchronously
         (async () => {
           const sessionDir = path.join(reportsDir, runId);
@@ -2338,7 +2369,7 @@ export async function dashboardCommand(options) {
 
       if (msg.type === 'register') {
         const agentId = msg.agentId || crypto.randomUUID();
-        const agent = { id: agentId, name: msg.name || msg.machine, machine: msg.machine, userId: msg.userId || null, ws, status: 'idle', currentJob: null, connectedAt: Date.now() };
+        const agent = { id: agentId, name: msg.name || msg.machine, machine: msg.machine, userId: msg.userId || null, ws, status: 'idle', currentJob: null, connectedAt: Date.now(), hasDisplay: msg.hasDisplay === true };
         agents.set(agentId, agent);
         ws.agentId = agentId;
         ws.send(JSON.stringify({ type: 'registered', agentId }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "skopix",
-  "version": "2.0.96",
+  "version": "2.0.98",
   "description": "Browser-based QA tool — record tests by using your app, replay them deterministically, generate Playwright code automatically",
   "main": "cli/index.js",
   "bin": {

package/web/index.html

@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Skopix — Record. Replay. Ship with confidence.</title>
 <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%230d1117'/%3E%3Cpolygon points='16,6 26,11 16,16 6,11' fill='%2300d4ff'/%3E%3Cpolygon points='6,11 16,16 26,11 26,14 16,19 6,14' fill='%2300a8cc'/%3E%3Cpolygon points='6,14 16,19 26,14 26,17 16,22 6,17' fill='%23007a99'/%3E%3C/svg%3E">
-<meta name="description" content="Skopix is a browser-based QA tool that records your test flows and replays them deterministically. AI stabilises selectors, generates Playwright code, and catches regressions before your users do.">
+<meta name="description" content="Skopix is an AI-powered QA platform — record tests, build from a reusable element library, run on a shared team server with MFA, and catch regressions before your users do.">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&family=Syne:wght@400;500;600;700;800&display=swap" rel="stylesheet">
@@ -197,11 +197,12 @@ footer { border-top: 1px solid var(--border); padding: 48px; display: flex; alig
   <a href="#" class="nav-logo">SKOP<span>IX</span></a>
   <ul class="nav-links">
     <li><a href="#how">How it works</a></li>
+    <li><a href="#library">Step library</a></li>
     <li><a href="#ai">AI providers</a></li>
-    <li><a href="#modes">Solo & team</a></li>
+    <li><a href="#modes">Deploy</a></li>
     <li><a href="#install">Install</a></li>
     <li><a href="#faq">FAQ</a></li>
-    <li><a href="https://github.com/x444dyx/skopix" class="nav-cta">GitHub →</a></li>
+    <li><a href="#install" class="nav-cta">Install →</a></li>
   </ul>
 </nav>
 
@@ -210,7 +211,7 @@ footer { border-top: 1px solid var(--border); padding: 48px; display: flex; alig
   <div class="hero-glow"></div>
   <div class="hero-glow2"></div>
 
-  <div class="badge"><span class="badge-dot"></span>Record · Replay · Regression-proof</div>
+  <div class="badge"><span class="badge-dot"></span>Record · Build · Library · Team · MFA</div>
 
   <h1 class="hero-title">
     QA that works<br>
@@ -218,7 +219,7 @@ footer { border-top: 1px solid var(--border); padding: 48px; display: flex; alig
   </h1>
 
   <p class="hero-sub">
-    Use your app normally. Skopix records every action. AI stabilises the selectors, writes the Playwright code, and replays it all — deterministically — every time.
+    Record tests by using your app. Build tests from a reusable element library. Deploy to a shared team server with user accounts and MFA. AI stabilises selectors, matches known elements automatically, and replays everything — deterministically — every time.
   </p>
 
   <div class="hero-actions">
@@ -235,16 +236,17 @@ footer { border-top: 1px solid var(--border); padding: 48px; display: flex; alig
       <span style="font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:8px">skopix dashboard</span>
     </div>
     <div class="terminal-body">
-      <div><span class="t-cmd">$</span> SKOPIX_SECRET_KEY="..." skopix dashboard --team</div>
-      <div class="t-out">✔ Dashboard running at http://localhost:9000</div>
-      <div class="t-out">✔ Team mode active · 3 users online</div>
-      <div style="margin-top:12px;color:var(--muted2)">── Replaying: Create A Bar Chart ──────────────────</div>
-      <div><span class="t-pass">✓</span> <span class="t-step">[1/14] CLICK — Click username input field</span></div>
-      <div><span class="t-pass">✓</span> <span class="t-step">[2/14] TYPE — Type 'admin' into username field</span></div>
-      <div><span class="t-pass">✓</span> <span class="t-step">[5/14] CLICK — Click the plus icon to add chart</span></div>
-      <div><span class="t-pass">✓</span> <span class="t-step">[13/14] ASSERT — Chart is visible</span></div>
-      <div><span class="t-pass">✓</span> <span class="t-step">[14/14] ASSERT — Title attribute contains "Bar chart"</span></div>
-      <div style="margin-top:8px"><span class="t-pass">✔ PASSED</span> <span style="color:var(--muted)">· 14 steps · 9.4s</span></div>
+      <div><span class="t-cmd">$</span> SKOPIX_SECRET_KEY="..." skopix start --host 0.0.0.0 --port 9000</div>
+      <div class="t-out">✔ Dashboard running at http://141.147.107.213:9000</div>
+      <div class="t-out">✔ Team mode · MFA enabled · 4 users online</div>
+      <div class="t-out">✔ Step library · 42 elements · 12 folders</div>
+      <div style="margin-top:12px;color:var(--muted2)">── Agent: Adils-Laptop.local (darwin) connected ────</div>
+      <div style="margin-top:4px;color:var(--muted2)">── Replaying: Create Chart With Sort ──────────────</div>
+      <div><span class="t-pass">✓</span> <span class="t-step">[1/18] CLICK — Login Button</span> <span style="color:var(--muted2);font-size:11px">← from library</span></div>
+      <div><span class="t-pass">✓</span> <span class="t-step">[5/18] CLICK — Category - Add New Chart Button</span> <span style="color:var(--muted2);font-size:11px">← from library</span></div>
+      <div><span class="t-pass">✓</span> <span class="t-step">[12/18] CLICK — Chart Editor - Save Chart</span></div>
+      <div><span class="t-pass">✓</span> <span class="t-step">[18/18] ASSERT — First row contains 60.00</span></div>
+      <div style="margin-top:8px"><span class="t-pass">✔ PASSED</span> <span style="color:var(--muted)">· 18 steps · 11.2s · run by adil aslam</span></div>
     </div>
   </div>
 </section>
@@ -254,7 +256,7 @@ footer { border-top: 1px solid var(--border); padding: 48px; display: flex; alig
   <div class="how-inner">
     <div class="section-label observe">How it works</div>
     <h2 class="section-title observe">Record once.<br>Replay forever.</h2>
-    <p class="section-sub observe">No scripting. No selectors. Just use your app — Skopix captures everything and turns it into a stable, repeatable test.</p>
+    <p class="section-sub observe">No scripting. No selectors. Record by using your app, or build tests from a reusable element library — Skopix handles the rest.</p>
 
     <div class="steps-grid">
       <div class="step-item observe">
@@ -268,8 +270,8 @@ footer { border-top: 1px solid var(--border); padding: 48px; display: flex; alig
       <div class="step-item observe">
         <div class="step-num">02 — AI PROCESSING</div>
         <div class="step-icon">◆</div>
-        <div class="step-title">AI stabilises your steps</div>
-        <div class="step-desc">After you stop, Skopix sends your raw steps through an LLM. It rewrites fragile positional selectors into stable ones (data-testid, aria-label, semantic HTML). It generates human-readable descriptions for each step. It produces complete Playwright test code in both JavaScript and TypeScript — ready to drop into your CI pipeline.</div>
+        <div class="step-title">AI stabilises &amp; matches</div>
+        <div class="step-desc">After recording, the LLM rewrites fragile positional selectors into stable ones (pi-test-identifier, aria-label, title, data-testid). It then scans your step library — if a recorded element matches a known library entry, it substitutes the canonical name and selector automatically. New elements go to pending review, not duplicated silently.</div>
         <span class="step-tag">Gemini · OpenAI · Ollama</span>
       </div>
 
@@ -290,19 +292,61 @@ footer { border-top: 1px solid var(--border); padding: 48px; display: flex; alig
       </div>
 
       <div class="step-item observe">
-        <div class="step-num">05 — REUSE</div>
+        <div class="step-num">05 — STEP LIBRARY</div>
         <div class="step-icon">♻</div>
-        <div class="step-title">Share setup flows</div>
-        <div class="step-desc">Mark any test as Reusable. Other tests can reference it as their Setup — Skopix runs the setup steps first in the same browser session, then hands off to the main test. Record your login flow once. Every other test that needs authentication just references it. No duplication, no maintenance headache.</div>
-        <span class="step-tag">Setup · Teardown · Reuse</span>
+        <div class="step-title">Build a reusable element library</div>
+        <div class="step-desc">Harvest UI elements into the step library — name them, store stable selectors, organise into folders. Build new tests entirely from the library using the visual test builder. Every recording auto-matches known elements. Update an element's selector once and it propagates to all tests that use it instantly.</div>
+        <span class="step-tag">Library · Builder · Auto-sync</span>
       </div>
 
       <div class="step-item observe">
-        <div class="step-num">06 — REPORT</div>
+        <div class="step-num">06 — TEAM &amp; REPORTS</div>
         <div class="step-icon">📋</div>
-        <div class="step-title">Full session reports</div>
-        <div class="step-desc">Every replay generates a full report: two-column layout with video on the left, clickable step list on the right. Click any step to see the screenshot at that point. Sessions are stored in All Sessions. Suite runs aggregate results across all tests. Audit log tracks who ran what and when.</div>
-        <span class="step-tag">Video · Screenshots · HTML report</span>
+        <div class="step-title">Full reports + team audit</div>
+        <div class="step-desc">Every replay generates a full report with video and step-by-step screenshots. Deploy to a cloud server — team members log in with MFA, run tests through their local agent, and all results stream back to the shared dashboard. Audit log tracks exactly who ran what test, when, and from which machine.</div>
+        <span class="step-tag">Video · MFA · Audit log</span>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- STEP LIBRARY -->
+<section id="library">
+  <div class="section-inner">
+    <div class="section-label observe">Step library</div>
+    <h2 class="section-title observe">One library.<br>Every test.</h2>
+    <p class="section-sub observe">Build a catalogue of reusable UI elements. Record a test — known elements are substituted automatically. Update a selector once and every test that uses it updates instantly.</p>
+
+    <div class="features-grid" style="margin-top:64px">
+      <div class="feature-card observe">
+        <div class="feature-icon" style="background:var(--cyan-dim)">🎯</div>
+        <div class="feature-title">Harvest elements</div>
+        <div class="feature-desc">Open the harvester, navigate your app, click "Capture" on any element. Name it, store the stable selector, assign a folder. That element is now in the library ready to use in any test.</div>
+      </div>
+      <div class="feature-card observe">
+        <div class="feature-icon" style="background:var(--cyan-dim)">🔄</div>
+        <div class="feature-title">Auto-match on record</div>
+        <div class="feature-desc">Record a new test and click through your app. After AI processing, each step is compared against the library. Matching elements get the canonical name and selector substituted automatically — no manual cleanup.</div>
+      </div>
+      <div class="feature-card observe">
+        <div class="feature-icon" style="background:var(--cyan-dim)">🔨</div>
+        <div class="feature-title">Visual test builder</div>
+        <div class="feature-desc">Build tests without recording. Pick elements from the library, choose an action (click, type, assert), set a value, preview in a real browser, save. Full debug and replay capability — identical to recorded tests.</div>
+      </div>
+      <div class="feature-card observe">
+        <div class="feature-icon" style="background:var(--cyan-dim)">⚡</div>
+        <div class="feature-title">One update, all tests</div>
+        <div class="feature-desc">Change an element's selector in the library — every test step using that selector updates instantly. Merge duplicate elements and all tests get the canonical version. Fragile selectors get a warning badge.</div>
+      </div>
+      <div class="feature-card observe">
+        <div class="feature-icon" style="background:var(--cyan-dim)">📁</div>
+        <div class="feature-title">Folders &amp; organisation</div>
+        <div class="feature-desc">Organise elements and tests into nested folders. Drag to reorder. Multi-select and move. Folders are separate from tags — tag for filtering, folder for structure. Same organisation system for both the library and All Tests.</div>
+      </div>
+      <div class="feature-card observe">
+        <div class="feature-icon" style="background:var(--cyan-dim)">⏳</div>
+        <div class="feature-title">Pending review queue</div>
+        <div class="feature-desc">New elements from recordings don't enter the library silently. They queue in pending review — you name them properly, edit the selector if needed, then approve. The amber badge tells you how many are waiting.</div>
       </div>
     </div>
   </div>
@@ -411,8 +455,8 @@ footer { border-top: 1px solid var(--border); padding: 48px; display: flex; alig
 <section id="modes">
   <div class="section-inner">
     <div class="section-label observe">Deployment modes</div>
-    <h2 class="section-title observe">Solo or as a team.<br>Same install.</h2>
-    <p class="section-sub observe">One flag changes everything. Run locally for personal use, or flip to team mode and share with your entire QA team — no separate server software needed.</p>
+    <h2 class="section-title observe">Solo, team, or<br>cloud-hosted.</h2>
+    <p class="section-sub observe">Run locally for personal use, share with your team on a local server, or deploy to a cloud VM for always-on access with MFA and API key authentication for agents.</p>
 
     <div class="modes-grid">
       <div class="mode-card mode-solo observe">
@@ -428,14 +472,15 @@ footer { border-top: 1px solid var(--border); padding: 48px; display: flex; alig
       </div>
 
       <div class="mode-card mode-team observe">
-        <div class="mode-label" style="color:var(--purple)">⬡ TEAM MODE</div>
+        <div class="mode-label" style="color:var(--purple)">⬡ TEAM / CLOUD MODE</div>
         <div class="mode-title">You and your team</div>
-        <div class="mode-desc">Adds login, user accounts, roles (Admin/Tester/Viewer), audit log, and shared test libraries. Teammates connect via your IP or a tunnel like <a href="https://portix.ayteelabs.com" style="color:var(--cyan)">Portix</a>. All test data lives on the host machine.</div>
+        <div class="mode-desc">Mandatory MFA for all users. User accounts with roles. Audit log. Shared step library. API keys for agents. Deploy to Oracle Cloud, Hetzner, or any Linux VM — teammates log in from anywhere, run tests via their local agent.</div>
         <div class="mode-code">
           <div><span style="color:var(--purple)">SKOPIX_SECRET_KEY</span>=<span style="color:var(--text)">"long-random-string"</span> \</div>
-          <div style="padding-left:16px"><span style="color:var(--cyan)">skopix dashboard --team --host 0.0.0.0</span></div>
+          <div style="padding-left:16px"><span style="color:var(--cyan)">skopix start --host 0.0.0.0 --port 9000</span></div>
           <div style="color:var(--muted);font-size:11px;margin-top:8px">→ Visit /setup to create the first admin</div>
-          <div style="color:var(--muted);font-size:11px">→ Invite teammates from the Users tab</div>
+          <div style="color:var(--muted);font-size:11px">→ Mandatory MFA on first login for every user</div>
+          <div style="color:var(--muted);font-size:11px">→ Agents connect with API keys — no MFA needed</div>
         </div>
       </div>
     </div>
@@ -452,8 +497,8 @@ footer { border-top: 1px solid var(--border); padding: 48px; display: flex; alig
           <div style="color:var(--muted)">Run <code style="color:var(--text)">portix 9000 --name skopix</code> for an instant public URL. Teammates open it from anywhere.</div>
         </div>
         <div>
-          <div style="color:var(--cyan);margin-bottom:6px">Always-on · Dedicated machine</div>
-          <div style="color:var(--muted)">Leave a Mac or Linux desktop running as a shared server. Recording needs a real display — Docker/cloud VMs won't work for that.</div>
+          <div style="color:var(--cyan);margin-bottom:6px">Always-on · Cloud VM</div>
+          <div style="color:var(--muted)">Deploy to Oracle Cloud Free Tier, Hetzner (~£4/mo), or any Ubuntu VM. Dashboard runs 24/7 via PM2. Each teammate runs an agent locally — recordings open Chrome on their screen.</div>
         </div>
       </div>
     </div>
@@ -506,10 +551,12 @@ footer { border-top: 1px solid var(--border); padding: 48px; display: flex; alig
       <div class="code-comment"># Each teammate runs this on their own machine:</div>
       <div><span class="code-cmd">$</span> npm install -g skopix</div>
       <div><span class="code-cmd">$</span> npx playwright install chromium</div>
+      <div class="code-comment"># Login with your dashboard credentials (triggers MFA):</div>
       <div><span class="code-cmd">$</span> skopix agent --server http://HOST-IP:9000 --key "your-secret"</div>
-      <div class="code-out">→ Prompts for Skopix dashboard login to identify your machine</div>
+      <div class="code-comment"># Or use an API key (no MFA — generate one in My Settings):</div>
+      <div><span class="code-cmd">$</span> skopix agent --server http://HOST-IP:9000 --key "secret" --api-key sk_live_...</div>
       <div class="code-out">→ Chrome opens on YOUR machine when you trigger tests</div>
-      <div class="code-out">→ Leave it running in a terminal while you work</div>
+      <div class="code-out">→ Results stream back to the shared cloud dashboard</div>
     </div>
 
     <div class="code-label observe">USING OLLAMA (LOCAL AI — NO API KEY NEEDED)</div>
@@ -526,16 +573,16 @@ footer { border-top: 1px solid var(--border); padding: 48px; display: flex; alig
       <div style="font-family:var(--mono);font-size:10px;color:var(--cyan);letter-spacing:0.15em;margin-bottom:16px">HOW IT ALL FITS TOGETHER</div>
       <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;font-family:var(--mono);font-size:12px;line-height:1.8">
         <div>
-          <div style="color:var(--white);margin-bottom:6px">1 person hosts</div>
-          <div style="color:var(--muted)">Runs <code style="color:var(--cyan)">skopix dashboard --team</code> and keeps it running. Everyone connects to their machine.</div>
+          <div style="color:var(--white);margin-bottom:6px">Dashboard on a cloud VM</div>
+          <div style="color:var(--muted)">Runs 24/7 via PM2. Everyone visits <code style="color:var(--cyan)">http://your-ip:9000</code> and logs in with email + MFA. No local install needed to use the dashboard.</div>
         </div>
         <div>
-          <div style="color:var(--white);margin-bottom:6px">Everyone runs an agent</div>
-          <div style="color:var(--muted)">Runs <code style="color:var(--cyan)">skopix agent</code> in a terminal. Their browser opens locally when they trigger a recording or replay.</div>
+          <div style="color:var(--white);margin-bottom:6px">Everyone runs an agent locally</div>
+          <div style="color:var(--muted)">Runs <code style="color:var(--cyan)">skopix agent</code> on their machine with an API key. Their browser opens when they trigger a recording or replay.</div>
         </div>
         <div>
-          <div style="color:var(--white);margin-bottom:6px">Tests run on your machine</div>
-          <div style="color:var(--muted)">When you click Record or Replay, Skopix dispatches to your agent. Chrome opens on your screen. Results stream back to the shared dashboard.</div>
+          <div style="color:var(--white);margin-bottom:6px">Shared step library</div>
+          <div style="color:var(--muted)">One library, all team members. Record a new test — known elements auto-match. New elements go to pending review. Update a selector once, all tests update.</div>
         </div>
       </div>
     </div>
@@ -585,7 +632,7 @@ footer { border-top: 1px solid var(--border); padding: 48px; display: flex; alig
 
       <details class="observe">
         <summary>How is this different from Playwright's own recorder? <span class="faq-icon">+</span></summary>
-        <div class="faq-body">Playwright's recorder generates raw selectors as-is — often fragile positional ones. Skopix uses an LLM to <strong>stabilise</strong> those selectors into semantic, stable equivalents. It also adds a full dashboard, team mode, setup/teardown flows, debug recording, credential management, suite running, and session history with video. It's a complete QA platform, not just a code generator.</div>
+        <div class="faq-body">Playwright's recorder generates raw selectors as-is — often fragile positional ones. Skopix uses an LLM to <strong>stabilise</strong> those selectors into semantic, stable equivalents. Beyond that, Skopix adds a full dashboard, step library with auto-matching, visual test builder, team mode with MFA, cloud deployment, audit log, debug recording, credential management, suite running, and session history with video. It's a complete QA platform, not just a code generator.</div>
       </details>
 
       <details class="observe">
@@ -593,6 +640,16 @@ footer { border-top: 1px solid var(--border); padding: 48px; display: flex; alig
         <div class="faq-body">Open the step editor (✏ on any test), find the failing step, and update the selector directly. Or use the ⏺ debug button on that step — Skopix replays everything up to that point in a real browser, then lets you record the correct action from scratch. New steps are AI-processed and inserted automatically.</div>
       </details>
 
+      <details class="observe">
+        <summary>What is the Step Library? <span class="faq-icon">+</span></summary>
+        <div class="faq-body">The step library is a reusable catalogue of UI elements — each with a name, stable selector, and optional default action. Harvest elements from your app using the harvester tool, or they get added automatically from recordings (pending your review). Once in the library, the visual <strong>Test Builder</strong> lets you build new tests by picking elements and choosing actions — no recording needed. Update an element's selector once and every test using it updates automatically.</div>
+      </details>
+
+      <details class="observe">
+        <summary>How does MFA work and how do agents authenticate? <span class="faq-icon">+</span></summary>
+        <div class="faq-body">In team mode, MFA is mandatory for all users. On first login, users are prompted to scan a QR code with any TOTP app (Google Authenticator, Authy, 1Password). Every subsequent login requires email + password + 6-digit code. Admins can reset MFA for users who lose their device. For agents running headlessly, use API keys instead — generate one in My Settings, pass it with <code>--api-key sk_live_...</code>. No MFA required for API keys.</div>
+      </details>
+
       <details class="observe">
         <summary>How does the login/setup flow work? <span class="faq-icon">+</span></summary>
         <div class="faq-body">Record your login flow once and mark it as <strong>Reusable</strong>. In any other test's editor, set that login test as the <strong>Setup</strong>. When that test runs, Skopix runs the login steps first in the same browser session — so the test starts already authenticated. No duplicating login steps across every test.</div>
@@ -610,7 +667,7 @@ footer { border-top: 1px solid var(--border); padding: 48px; display: flex; alig
 
       <details class="observe">
         <summary>How do remote teammates connect? <span class="faq-icon">+</span></summary>
-        <div class="faq-body"><strong>Same office:</strong> connect at <code>http://your-ip:9000</code> on the same network. <strong>Remote:</strong> run <code>portix 9000 --name skopix</code> (using <a href="https://portix.ayteelabs.com" style="color:var(--cyan)">Portix</a>) for an instant public URL — teammates open it from anywhere. <strong>Always-on:</strong> deploy to a cloud VM with Docker (~£4/mo at Hetzner), point your domain at it, done.</div>
+        <div class="faq-body"><strong>Same office:</strong> connect at <code>http://your-ip:9000</code> on the same network. <strong>Remote / cloud:</strong> deploy the dashboard to a cloud VM (Oracle Cloud Free Tier, Hetzner ~£4/mo) — teammates connect from anywhere at your public IP. <strong>Portix tunnel:</strong> run <code>portix 9000 --name skopix</code> for an instant public URL without a server. Each teammate still runs the agent locally — their Chrome opens on their own machine when tests run.</div>
       </details>
 
       <details class="observe">
@@ -634,8 +691,8 @@ footer { border-top: 1px solid var(--border); padding: 48px; display: flex; alig
 
 <!-- CTA -->
 <section class="cta-section">
-  <div class="cta-title observe">Start recording.<br><span style="color:var(--cyan)">Stop scripting.</span></div>
-  <p class="cta-sub observe">Free. Self-hosted. Your tests, your data, your machine. One command to get started.</p>
+  <div class="cta-title observe">Record. Build. Deploy.<br><span style="color:var(--cyan)">Ship with confidence.</span></div>
+  <p class="cta-sub observe">Free. Self-hosted. Step library, team mode, MFA, cloud-ready. One command to get started.</p>
   <div style="display:flex;gap:16px;justify-content:center;flex-wrap:wrap" class="observe">
     <a href="#install" class="btn-primary">Install now →</a>
     <a href="https://github.com/x444dyx/skopix" class="btn-ghost">GitHub</a>
@@ -648,7 +705,9 @@ footer { border-top: 1px solid var(--border); padding: 48px; display: flex; alig
   <div class="footer-brand">SKOPIX</div>
   <ul class="footer-links">
     <li><a href="#how">How it works</a></li>
+    <li><a href="#library">Step library</a></li>
     <li><a href="#ai">AI providers</a></li>
+    <li><a href="#modes">Deploy</a></li>
     <li><a href="#install">Install</a></li>
     <li><a href="#faq">FAQ</a></li>
     <li><a href="https://github.com/x444dyx/skopix">GitHub</a></li>