cbrowser 18.67.0 → 18.68.0

package/dist/cognitive/index.js

@@ -26,7 +26,7 @@ import { existsSync, readFileSync, writeFileSync } from "fs";
 import { join } from "path";
 import { CBrowser } from "../browser.js";
 import { getPersona, getCognitiveProfile, createCognitivePersona, } from "../personas.js";
-import { createInitialEmotionalState, createEmotionalConfig, applyEmotionalTrigger, decayEmotions, calculateAbandonmentModifier, describeEmotionalState, shouldConsiderAbandonment, } from "./emotions.js";
+import { createInitialEmotionalState, createEmotionalConfig, applyEmotionalTrigger, decayEmotionsWithTraits, deriveSimplifiedState, calculateAbandonmentModifier, describeEmotionalState, shouldConsiderAbandonment, } from "./emotions.js";
 import { calculateFatigueIncrement, calculateFittsMovementTime, shouldSwitchToSystem2, canReturnToSystem1, calculateTypingTime, calculateScanWidthMultiplier, calculateGazeMouseLag, calculatePeripheralVision, createHabituationState, updateHabituationState, classifyUIPattern, } from "../types.js";
 import { loadConfigFile, getDataDir } from "../config.js";
 // ============================================================================
@@ -113,6 +113,545 @@ export function isClaudeCodeSession() {
 export function isCognitiveAvailable() {
     return isApiKeyConfigured() || isClaudeCodeSession();
 }
+// ============================================================================
+// Cognitive Journey Runner
+// ============================================================================
+/**
+ * In-page mouse overlay — injected on every navigation when `enableMouseOverlay`
+ * is set. Renders a synthetic cursor + click ripples + action banner inside the
+ * page DOM so the screen recording / VNC stream actually shows where the bot
+ * is interacting. CDP-driven clicks don't move the OS cursor, so without this
+ * the recording looks like things click themselves.
+ *
+ * Exposes `window.__cbShowAction(text)` for the journey runner to surface what
+ * is about to happen on screen.
+ */
+const MOUSE_OVERLAY_SCRIPT = `(() => {
+  if (window.__cbHelperInstalled || window.__cbHelperPending) return;
+  // addInitScript runs at "earliest" — documentElement may not exist yet, so
+  // defer real setup until DOMContentLoaded. Mark "pending" to prevent
+  // duplicate scheduling if the script gets re-evaluated mid-load.
+  window.__cbHelperPending = true;
+
+  const install = () => {
+    if (window.__cbHelperInstalled) return;
+    if (!document.documentElement || !document.body) return;
+    window.__cbHelperInstalled = true;
+    document.documentElement.setAttribute('data-cb-helper', '1');
+
+    const css = \`
+    /* Hide native OS / chromium cursors entirely so our injected pointer is
+       the ONLY one visible. Combined with x11vnc -nocursor on the server side,
+       this guarantees a single cursor in VNC captures. */
+    html, body, *, *::before, *::after { cursor: none !important; }
+
+    .cb-cursor {
+      position: fixed; left: 0; top: 0;
+      width: 56px; height: 56px;
+      pointer-events: none;
+      z-index: 2147483647;
+      transform: translate(-200px, -200px);
+      /* GPU-promoted layer — the cursor is updated every frame, so isolating
+         it from the rest of the page avoids triggering layout/paint elsewhere
+         and gives consistent 60fps motion. */
+      will-change: transform;
+      transform-origin: 0 0;
+    }
+    .cb-cursor svg {
+      width: 56px; height: 56px;
+      filter:
+        drop-shadow(0 0 2px #000)
+        drop-shadow(0 3px 8px rgba(0,0,0,0.65));
+    }
+    .cb-wake {
+      position: fixed;
+      width: 18px; height: 18px;
+      border-radius: 50%;
+      pointer-events: none;
+      z-index: 2147483646;
+      transform: translate(-50%, -50%);
+      will-change: transform, opacity;
+    }
+    .cb-wake-1 {
+      background: radial-gradient(circle, rgba(99,102,241,0.55) 0%, rgba(99,102,241,0.0) 60%);
+      animation: cb-wake-out 0.85s cubic-bezier(0.2,0.8,0.4,1) forwards;
+    }
+    .cb-wake-2 {
+      border: 2px solid rgba(99,102,241,0.95);
+      animation: cb-wake-ring 0.9s cubic-bezier(0.2,0.8,0.4,1) forwards;
+    }
+    @keyframes cb-wake-out {
+      0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0.95; }
+      100% { transform: translate(-50%, -50%) scale(4.5); opacity: 0; }
+    }
+    @keyframes cb-wake-ring {
+      0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 1; border-width: 2px; }
+      60%  { opacity: 0.7; border-width: 2px; }
+      100% { transform: translate(-50%, -50%) scale(5); opacity: 0; border-width: 1px; }
+    }
+    .cb-scroll-indicator {
+      position: fixed;
+      right: 24px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 44px;
+      padding: 10px 0;
+      background: rgba(15,23,42,0.85);
+      color: white;
+      border-radius: 22px;
+      pointer-events: none;
+      z-index: 2147483645;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 6px;
+      opacity: 0;
+      transition: opacity 0.25s;
+      box-shadow: 0 4px 16px rgba(0,0,0,0.4);
+    }
+    .cb-scroll-indicator.cb-show { opacity: 1; }
+    .cb-scroll-arrow {
+      width: 18px; height: 18px;
+      animation: cb-scroll-bob 0.55s ease-in-out infinite alternate;
+    }
+    .cb-scroll-up .cb-scroll-arrow { transform: rotate(180deg); }
+    @keyframes cb-scroll-bob {
+      0%   { transform: translateY(-3px); opacity: 0.5; }
+      100% { transform: translateY(3px); opacity: 1; }
+    }
+    .cb-action-banner {
+      position: fixed;
+      top: 14px; left: 50%;
+      transform: translateX(-50%);
+      padding: 7px 16px;
+      max-width: 80vw;
+      background: rgba(15,23,42,0.92);
+      color: #fff;
+      font: 500 13px/1.3 -apple-system, system-ui, sans-serif;
+      border-radius: 999px;
+      pointer-events: none;
+      z-index: 2147483645;
+      box-shadow: 0 6px 20px rgba(0,0,0,0.35);
+      transition: opacity 0.25s;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      opacity: 0;
+    }
+    .cb-action-banner.cb-show { opacity: 1; }
+  \`;
+    const style = document.createElement('style');
+    style.textContent = css;
+    (document.head || document.documentElement).appendChild(style);
+
+    const cursor = document.createElement('div');
+    cursor.className = 'cb-cursor';
+    cursor.innerHTML = '<svg viewBox="0 0 24 24" width="56" height="56" style="display:block"><path d="M5 3 L19 12 L12 13 L15 20 L12 21 L9 14 L5 18 Z" fill="#ffffff" stroke="#000000" stroke-width="1.4" stroke-linejoin="round" stroke-linecap="round"/></svg>';
+    document.body.appendChild(cursor);
+
+    // ─── Smooth cursor animation ───
+    // CDP-driven clicks teleport: we get a single mousedown at target coords
+    // with no preceding mousemove. To make the cursor's motion feel natural,
+    // animate from the last known position to the new one over ~280ms with
+    // ease-out. requestAnimationFrame keeps it at display refresh rate.
+    //
+    // Persist position across navigations via sessionStorage so the cursor
+    // resumes exactly where it was on the prior page (e.g. clicked a link in
+    // the nav, new page loads — cursor should still be at the link, not jump
+    // back to a default spot).
+    let curX, curY;
+    try {
+      const saved = JSON.parse(sessionStorage.getItem('__cbCursor') || 'null');
+      if (saved && typeof saved.x === 'number' && typeof saved.y === 'number') {
+        curX = Math.min(Math.max(0, saved.x), window.innerWidth);
+        curY = Math.min(Math.max(0, saved.y), window.innerHeight);
+      }
+    } catch {}
+    if (typeof curX !== 'number') {
+      curX = window.innerWidth / 2;
+      curY = 80;
+    }
+    cursor.style.transform = 'translate(' + (curX - 5) + 'px, ' + (curY - 4) + 'px)';
+    const persistCursor = () => {
+      try { sessionStorage.setItem('__cbCursor', JSON.stringify({ x: curX, y: curY })); } catch {}
+    };
+    let animRaf = 0;
+    const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
+    const setCursor = (x, y) => {
+      curX = x; curY = y;
+      // Offset so the SVG's hotspot (top-left of the arrow tip) sits at the
+      // actual click coordinates. With a 56px sprite we offset by ~8/6.
+      cursor.style.transform = 'translate3d(' + (x - 8) + 'px, ' + (y - 6) + 'px, 0)';
+      persistCursor();
+    };
+    // Tighter ease curve — snappier acceleration, gentler arrival. Distance-
+    // proportional duration so the cursor never crawls on long hops or jitters
+    // on tiny ones.
+    const easeOutQuart = (t) => 1 - Math.pow(1 - t, 4);
+    const moveCursorTo = (x, y, durationMs) => {
+      if (animRaf) cancelAnimationFrame(animRaf);
+      const startX = curX, startY = curY;
+      const dx = x - startX, dy = y - startY;
+      const dist = Math.hypot(dx, dy);
+      // 200ms minimum for visibility; 600ms cap for very long hops; ~3px/ms
+      // travel speed in between feels like a deliberate human reach.
+      const dur = Math.min(600, Math.max(200, durationMs ?? (180 + dist * 0.55)));
+      const t0 = performance.now();
+      const tick = () => {
+        const t = Math.min(1, (performance.now() - t0) / dur);
+        const e = easeOutQuart(t);
+        setCursor(startX + dx * e, startY + dy * e);
+        if (t < 1) animRaf = requestAnimationFrame(tick);
+        else animRaf = 0;
+      };
+      animRaf = requestAnimationFrame(tick);
+    };
+
+    const wake = (x, y) => {
+      // Two layered shapes: filled radial (the splash) + ring (the wave).
+      const w1 = document.createElement('div');
+      w1.className = 'cb-wake cb-wake-1';
+      w1.style.left = x + 'px'; w1.style.top = y + 'px';
+      const w2 = document.createElement('div');
+      w2.className = 'cb-wake cb-wake-2';
+      w2.style.left = x + 'px'; w2.style.top = y + 'px';
+      document.body.appendChild(w1);
+      document.body.appendChild(w2);
+      setTimeout(() => { w1.remove(); w2.remove(); }, 950);
+    };
+
+    document.addEventListener('mousemove', (e) => moveCursorTo(e.clientX, e.clientY), true);
+    document.addEventListener('mousedown', (e) => {
+      moveCursorTo(e.clientX, e.clientY, 220);
+      // Delay the wake slightly so it appears after the cursor lands.
+      setTimeout(() => wake(e.clientX, e.clientY), 180);
+    }, true);
+
+    // ─── Scroll indicator ───
+    // Shown briefly when wheel events or programmatic scroll happens. Direction
+    // arrow flips based on deltaY sign. Auto-hides after activity stops.
+    let scrollIndicator = null;
+    let scrollDir = 'down';
+    let scrollHideTimer = 0;
+    const ensureScrollIndicator = () => {
+      if (scrollIndicator) return scrollIndicator;
+      scrollIndicator = document.createElement('div');
+      scrollIndicator.className = 'cb-scroll-indicator';
+      scrollIndicator.innerHTML = '<svg class="cb-scroll-arrow" viewBox="0 0 24 24" width="18" height="18"><path d="M7 10 L12 15 L17 10" stroke="white" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+      document.body.appendChild(scrollIndicator);
+      return scrollIndicator;
+    };
+    const showScroll = (dy) => {
+      const el = ensureScrollIndicator();
+      const dir = dy >= 0 ? 'down' : 'up';
+      if (dir !== scrollDir) {
+        scrollDir = dir;
+        el.classList.toggle('cb-scroll-up', dir === 'up');
+      }
+      el.classList.add('cb-show');
+      if (scrollHideTimer) clearTimeout(scrollHideTimer);
+      scrollHideTimer = setTimeout(() => el.classList.remove('cb-show'), 700);
+    };
+    document.addEventListener('wheel', (e) => showScroll(e.deltaY), { capture: true, passive: true });
+    // Programmatic scroll (window.scrollBy / scrollTo) doesn't fire wheel —
+    // hook the scroll event too with a direction inferred from delta.
+    let lastScrollY = window.scrollY;
+    document.addEventListener('scroll', () => {
+      const cur = window.scrollY;
+      const dy = cur - lastScrollY;
+      lastScrollY = cur;
+      if (Math.abs(dy) > 1) showScroll(dy);
+    }, { capture: true, passive: true });
+
+    // ─── Action banner ───
+    let banner = null;
+    let bannerTimer = null;
+    window.__cbShowAction = (text) => {
+      if (!banner) {
+        banner = document.createElement('div');
+        banner.className = 'cb-action-banner';
+        document.body.appendChild(banner);
+      }
+      banner.textContent = text;
+      banner.classList.add('cb-show');
+      if (bannerTimer) clearTimeout(bannerTimer);
+      bannerTimer = setTimeout(() => { if (banner) banner.classList.remove('cb-show'); }, 2600);
+    };
+
+    // ─── Manual cursor positioning ───
+    // Let the journey runner pre-position the cursor before a click so the
+    // animated travel from previous spot to target is visible (clicks otherwise
+    // happen as a single mousedown, animation feels like teleport).
+    window.__cbMoveCursor = (x, y, dur) => moveCursorTo(x, y, dur);
+  };
+
+  // Defer install until AFTER framework hydration completes. Use
+  // requestIdleCallback if available — it fires after main-thread work like
+  // hydration settles. Falls back to setTimeout. Modifying the DOM too early
+  // races with React/Next.js hydration ("Application error: client-side
+  // exception"); too late and the viewer doesn't see the cursor in time.
+  const scheduleInstall = () => {
+    if (typeof window.requestIdleCallback === 'function') {
+      window.requestIdleCallback(install, { timeout: 600 });
+    } else {
+      setTimeout(install, 100);
+    }
+  };
+  if (document.readyState !== 'loading') {
+    scheduleInstall();
+  } else {
+    document.addEventListener('DOMContentLoaded', scheduleInstall, { once: true });
+  }
+})();`;
+/**
+ * In-browser attention heatmap. Renders a canvas overlay positioned over the
+ * viewport and recomputes saliency directly from the DOM on scroll, resize,
+ * and DOM mutation. The heatmap is drawn INSIDE the chromium page, which
+ * means VNC captures it natively — no Node-side image generation, no SSE
+ * payload, no dashboard-side overlay positioning. Per-frame compute is
+ * sub-millisecond on modern pages because we're just reading bounding boxes.
+ *
+ * Config is injected as `window.__cbAttentionConfig` by the journey runner.
+ */
+const ATTENTION_OVERLAY_SCRIPT = `(() => {
+  if (window.__cbAttentionInstalled || window.__cbAttentionPending) return;
+  window.__cbAttentionPending = true;
+
+  const install = () => {
+    if (window.__cbAttentionInstalled) return;
+    if (!document.documentElement || !document.body) return;
+    window.__cbAttentionInstalled = true;
+
+    const config = window.__cbAttentionConfig || { typeWeights: {}, personaMods: {}, goal: "" };
+    const cellSize = 16;
+
+    const css = \`
+      .cb-attn-canvas {
+        position: fixed; left: 0; top: 0;
+        width: 100vw; height: 100vh;
+        pointer-events: none;
+        z-index: 2147483640;
+        opacity: 0.5;
+        /* Moderate blur smears the per-cell rectangles into a smooth gradient.
+           Lower than 28px to reduce GPU load — heavy blur on a fullscreen
+           canvas with --disable-gpu can cause frame drops / black flashes. */
+        filter: blur(18px);
+        /* Promote canvas to its own compositor layer so blur computes once
+           per repaint, not on every parent reflow. */
+        transform: translateZ(0);
+        backface-visibility: hidden;
+      }
+    \`;
+    const style = document.createElement('style');
+    style.textContent = css;
+    (document.head || document.documentElement).appendChild(style);
+
+    const canvas = document.createElement('canvas');
+    canvas.className = 'cb-attn-canvas';
+    document.body.appendChild(canvas);
+    const ctx = canvas.getContext('2d');
+
+    // Color stops — blue (low) → green → yellow → red (high). Alpha grows
+    // with saliency so cold areas are nearly transparent.
+    const stops = [
+      { t: 0.00, r:   0, g:   0, b: 128, a: 0.0 },
+      { t: 0.20, r:   0, g:   0, b: 255, a: 0.35 },
+      { t: 0.40, r:   0, g: 255, b: 255, a: 0.5 },
+      { t: 0.55, r:   0, g: 255, b:   0, a: 0.6 },
+      { t: 0.70, r: 255, g: 255, b:   0, a: 0.7 },
+      { t: 0.85, r: 255, g: 128, b:   0, a: 0.8 },
+      { t: 1.00, r: 255, g:   0, b:   0, a: 0.9 },
+    ];
+    const sample = (v) => {
+      v = Math.max(0, Math.min(1, v));
+      let lo = 0;
+      while (lo < stops.length - 1 && stops[lo + 1].t < v) lo++;
+      const hi = Math.min(lo + 1, stops.length - 1);
+      const a = stops[lo], b = stops[hi];
+      const span = b.t - a.t || 1;
+      const k = (v - a.t) / span;
+      return [
+        Math.round(a.r + (b.r - a.r) * k),
+        Math.round(a.g + (b.g - a.g) * k),
+        Math.round(a.b + (b.b - a.b) * k),
+        a.a + (b.a - a.a) * k,
+      ];
+    };
+
+    // Classify a DOM element into one of the persona's weighted categories.
+    const classify = (el) => {
+      const tag = el.tagName.toLowerCase();
+      const role = el.getAttribute('role') || '';
+      if (el.closest('nav, [role="navigation"]')) return 'navigation';
+      if (tag === 'button' || role === 'button' || role === 'link' && tag !== 'a') return 'cta';
+      if (tag === 'a') {
+        // Prominent CTAs: large buttons styled as anchors
+        const txt = (el.innerText || '').trim();
+        if (txt && txt.length < 40 && /sign\\s*up|get\\s*started|try|buy|start|create|register|apply/i.test(txt)) return 'cta';
+        return 'link';
+      }
+      if (/^h[1-6]$/.test(tag) || role === 'heading') return 'heading';
+      if (tag === 'input' || tag === 'select' || tag === 'textarea') {
+        if (/^search$/i.test(el.getAttribute('type') || '') || /search/i.test(el.getAttribute('placeholder') || '')) return 'search';
+        return 'form';
+      }
+      if (tag === 'img' || tag === 'svg') {
+        if (el.getAttribute('aria-hidden') === 'true' || el.getAttribute('alt') === '') return 'decorative';
+        return 'image';
+      }
+      if (/\\$\\d|\\d+\\s*(usd|eur|gbp|\\$|€|£)/i.test(el.textContent || '')) return 'price';
+      if (el.getAttribute('role') === 'alert' || /\\berror\\b/i.test(el.className || '')) return 'error';
+      return 'content';
+    };
+
+    // Sum of weight from goal-keyword matches in element text.
+    const goalWords = (config.goal || '').toLowerCase()
+      .split(/\\s+/).filter(w => w.length > 2 && !/^(the|a|an|to|for|of|in|on|at|is|it|my|i|me|and|or|how|do|can)$/.test(w));
+    const goalRelevance = (text) => {
+      if (!text || !goalWords.length) return 0;
+      const t = text.toLowerCase();
+      let m = 0;
+      for (const w of goalWords) if (t.includes(w)) m++;
+      return (m / goalWords.length) * 2.0;
+    };
+
+    let lastCells = null;
+    let lastDims = { cols: 0, rows: 0, w: 0, h: 0 };
+    let frameId = 0;
+    const recompute = () => {
+      const w = window.innerWidth, h = window.innerHeight;
+      const dpr = window.devicePixelRatio || 1;
+      if (canvas.width !== w * dpr || canvas.height !== h * dpr) {
+        canvas.width = w * dpr;
+        canvas.height = h * dpr;
+        ctx.scale(dpr, dpr);
+      }
+      const cols = Math.ceil(w / cellSize);
+      const rows = Math.ceil(h / cellSize);
+      const cells = new Float32Array(cols * rows);
+
+      // Sample interactive + structural elements; cap to 600 to bound work
+      const sel = 'button, a, [role="button"], [role="link"], [role="heading"], h1, h2, h3, h4, input, select, textarea, [data-cb-cta], img, label, p, li';
+      const els = document.querySelectorAll(sel);
+      const limit = Math.min(els.length, 600);
+      for (let i = 0; i < limit; i++) {
+        const el = els[i];
+        const r = el.getBoundingClientRect();
+        if (r.bottom < 0 || r.top > h || r.right < 0 || r.left > w) continue;
+        if (r.width < 4 || r.height < 4) continue;
+        const cs = window.getComputedStyle(el);
+        if (cs.display === 'none' || cs.visibility === 'hidden' || cs.opacity === '0') continue;
+
+        const type = classify(el);
+        let weight = (config.typeWeights && config.typeWeights[type]) || 0.2;
+        const mod = (config.personaMods && config.personaMods[type]) || 1.0;
+        weight *= mod;
+        const text = (el.innerText || el.textContent || '').slice(0, 200);
+        const gr = goalRelevance(text);
+        if (gr > 0) weight *= (1 + gr);
+
+        const x1 = Math.max(0, Math.floor(r.left / cellSize));
+        const x2 = Math.min(cols - 1, Math.floor(r.right / cellSize));
+        const y1 = Math.max(0, Math.floor(r.top / cellSize));
+        const y2 = Math.min(rows - 1, Math.floor(r.bottom / cellSize));
+        for (let rr = y1; rr <= y2; rr++) {
+          for (let cc = x1; cc <= x2; cc++) {
+            const idx = rr * cols + cc;
+            if (cells[idx] < weight) cells[idx] = weight;
+          }
+        }
+      }
+
+      // Normalize
+      let max = 0;
+      for (let i = 0; i < cells.length; i++) if (cells[i] > max) max = cells[i];
+      if (max === 0) max = 1;
+
+      // Render — clearRect first, then per-cell fill. The CSS filter blur
+      // (28px) smears these rectangles into a smooth gradient, so we keep the
+      // threshold low enough that mid-saliency cells contribute their colors
+      // to the blur halo rather than leaving cold gaps.
+      ctx.clearRect(0, 0, w, h);
+      for (let r0 = 0; r0 < rows; r0++) {
+        for (let c0 = 0; c0 < cols; c0++) {
+          const v = cells[r0 * cols + c0] / max;
+          if (v < 0.03) continue;
+          const [rr, gg, bb, aa] = sample(v);
+          ctx.fillStyle = 'rgba(' + rr + ',' + gg + ',' + bb + ',' + aa + ')';
+          ctx.fillRect(c0 * cellSize, r0 * cellSize, cellSize, cellSize);
+        }
+      }
+      lastCells = cells;
+      lastDims = { cols, rows, w, h };
+    };
+
+    const schedule = () => {
+      if (frameId) cancelAnimationFrame(frameId);
+      frameId = requestAnimationFrame(() => { frameId = 0; recompute(); });
+    };
+
+    window.addEventListener('scroll', schedule, { capture: true, passive: true });
+    window.addEventListener('resize', schedule);
+    document.addEventListener('scroll', schedule, { capture: true, passive: true });
+
+    // Watch for major DOM changes — debounce to avoid mutation storms
+    let mutTimer = 0;
+    new MutationObserver(() => {
+      if (mutTimer) clearTimeout(mutTimer);
+      mutTimer = setTimeout(schedule, 300);
+    }).observe(document.body, { childList: true, subtree: true, attributes: false });
+
+    schedule();
+    // Initial settle re-render after fonts/images load
+    setTimeout(schedule, 600);
+    setTimeout(schedule, 1500);
+
+    // Public API
+    window.__cbAttentionToggle = (visible) => {
+      canvas.style.display = visible === false ? 'none' : '';
+    };
+    window.__cbAttentionRefresh = schedule;
+  };
+
+  if (typeof window.requestIdleCallback === 'function') {
+    window.requestIdleCallback(install, { timeout: 800 });
+  } else {
+    setTimeout(install, 150);
+  }
+})();`;
+/**
+ * Build the JSON config bundle that drives the in-browser attention heatmap.
+ * The browser-side script doesn't have access to the SDK's persona profiles,
+ * so we precompute the type-weight × persona-modifier table here and ship it.
+ */
+function buildAttentionConfig(personaName, goal, traits) {
+    // Mirror of ELEMENT_TYPE_WEIGHTS in attention-transport.ts. Kept in sync by
+    // hand — small enough that drift hasn't been a problem.
+    const typeWeights = {
+        cta: 1.0, heading: 0.8, form: 0.7, search: 0.7,
+        image: 0.5, navigation: 0.4, link: 0.3,
+        content: 0.2, decorative: 0.1, price: 0.9, error: 0.9,
+    };
+    // Trait-driven modifiers. Mirrors computeTraitModifiers in attention-transport.
+    const t = (k) => traits?.[k] ?? 0.5;
+    const personaMods = {
+        cta: 1.0 + (1.0 - t("patience")) * 0.5,
+        search: 0.7 + (1.0 - t("patience")) * 0.6,
+        content: t("readingTendency") > 0.6 ? 0.4 + t("readingTendency") * 0.4 : 0.2 + t("patience") * 0.4,
+        heading: 0.8 + t("curiosity") * 0.4,
+        image: 0.5 + t("curiosity") * 0.5,
+        navigation: 0.4 + (1.0 - t("siteFamiliarity")) * 0.6,
+        error: 0.5 + (1.0 - t("selfEfficacy")) * 0.5,
+        price: 0.5 + (1.0 - t("riskTolerance")) * 0.5,
+        decorative: 0.1 + (1.0 - t("metacognitivePlanning")) * 0.4,
+        form: 0.5 + t("proceduralFluency") * 0.3,
+        link: 1.0,
+    };
+    return { typeWeights, personaMods, goal: goal || "", persona: personaName };
+}
+// Note: CognitiveJourneyOptions accepts `device` to emulate a specific device
+// preset (mobile/tablet/desktop or "iPhone 15", etc.). Wired in below alongside
+// the other browserConfig overrides.
 /**
  * Run an autonomous cognitive journey using the Claude API.
  *
@@ -189,6 +728,22 @@ export async function runCognitiveJourney(options) {
     }
     const profile = getCognitiveProfile(personaObj);
     const traits = profile.traits;
+    // Build the InputTraits subset used by human-input.ts. CognitiveTraits has
+    // proceduralFluency / patience / readingTendency directly; motorPrecision
+    // doesn't exist as a cognitive trait, so we proxy it from proceduralFluency
+    // (motor and procedural skill correlate strongly: r ≈ 0.5-0.7 in the
+    // psychomotor literature). Personas with explicit motor disability traits
+    // (low-vision-magnified, motor-impairment-tremor) get extra penalty so
+    // their clicks visibly miss more often.
+    const aTraits = personaObj.accessibilityTraits;
+    const motorBase = traits.proceduralFluency ?? 0.5;
+    const motorPenalty = aTraits?.motorControl !== undefined ? aTraits.motorControl : 1.0;
+    const inputTraits = {
+        proceduralFluency: traits.proceduralFluency ?? 0.5,
+        motorPrecision: Math.max(0.1, Math.min(1, motorBase * motorPenalty)),
+        patience: traits.patience ?? 0.5,
+        readingTendency: traits.readingTendency ?? 0.5,
+    };
     // Calculate abandonment thresholds
     const thresholds = {
         patienceMin: 0.1,
@@ -294,7 +849,7 @@ export async function runCognitiveJourney(options) {
     // Create browser with timezone/locale/geolocation if specified
     const browserConfig = {
         headless,
-        persistent: true,
+        persistent: options.persistent ?? true,
     };
     if (effectiveLocation.timezone)
         browserConfig.timezone = effectiveLocation.timezone;
@@ -302,8 +857,93 @@ export async function runCognitiveJourney(options) {
         browserConfig.locale = effectiveLocation.locale;
     if (effectiveLocation.geolocation)
         browserConfig.geolocation = effectiveLocation.geolocation;
+    if (options.launchEnv)
+        browserConfig.launchEnv = options.launchEnv;
+    if (options.device)
+        browserConfig.device = options.device;
+    // Live viewer alignment: chromium runs in a 1920×1080 OS window on Xvfb;
+    // browser chrome (tabs + URL bar) takes ~85px from the top, so the visible
+    // page area is 1920×995. We size the Playwright viewport to MATCH that
+    // visible area — that way the attention heatmap (computed for window.inner*)
+    // is exactly the right shape to overlay on the VNC stream.
+    // Window size stays at 1920×1080 so chromium fills Xvfb edge-to-edge.
+    // Dashboard overlay positions: top:7.87% (85/1080), height:92.13% (995/1080).
+    if (options.enableMouseOverlay) {
+        browserConfig.viewportWidth = 1920;
+        browserConfig.viewportHeight = 995;
+        browserConfig.windowWidth = 1920;
+        browserConfig.windowHeight = 1080;
+        // Heavy university / news / e-commerce sites often need >30s to reach
+        // domcontentloaded with all their analytics/CDN scripts. Live journeys
+        // get a 60s navigation budget per attempt.
+        browserConfig.timeout = 60000;
+        // When a click opens target="_blank" or window.open, follow the new tab
+        // so VNC keeps showing where the persona actually went.
+        browserConfig.followPopups = true;
+    }
     const browser = new CBrowser(browserConfig);
-    await browser.navigate(options.startUrl);
+    // Helper that re-injects the mouse overlay. The overlay script is idempotent
+    // (gates on window.__cbHelperInstalled), so calling this after every navigation
+    // is safe and ensures the overlay always survives full page loads.
+    const installMouseOverlay = async () => {
+        if (!options.enableMouseOverlay)
+            return;
+        try {
+            const page = await browser.getPage();
+            await page.evaluate(MOUSE_OVERLAY_SCRIPT);
+        }
+        catch (e) {
+            console.warn(`[cognitive] Mouse overlay inject failed: ${e.message}`);
+        }
+    };
+    // Add the script as a context-level init script too — this catches new
+    // pages opened by JS (target=_blank, window.open) without us having to
+    // re-inject in the journey loop.
+    if (options.enableMouseOverlay) {
+        try {
+            const initialPage = await browser.getPage();
+            await initialPage.context().addInitScript(MOUSE_OVERLAY_SCRIPT);
+            // In-browser attention heatmap. Renders to a canvas inside the page so
+            // VNC captures it natively and updates instantly with scroll/resize.
+            // Persona modifiers (type weights × cognitive traits) are precomputed
+            // here in Node and serialized into the page as window.__cbAttentionConfig.
+            const attentionConfig = buildAttentionConfig(personaObj.name, options.goal, traits);
+            const configBootstrap = `window.__cbAttentionConfig = ${JSON.stringify(attentionConfig)};`;
+            await initialPage.context().addInitScript(configBootstrap + ATTENTION_OVERLAY_SCRIPT);
+        }
+        catch (e) {
+            console.warn(`[cognitive] Overlay context init failed: ${e.message}`);
+        }
+    }
+    // Navigate with retry for transient network errors. Use domcontentloaded
+    // strategy (not the default "auto" which tries networkidle first) — heavy
+    // sites like .edu / news / e-commerce often never reach networkidle and
+    // would burn the full 30s timeout before falling back. Once DOM is
+    // interactive the persona can start perceiving; trailing tracker requests
+    // shouldn't block. ERR_NETWORK_CHANGED retried up to 4 times.
+    // Hard timeout per attempt is browserConfig.timeout (set to 60s above for
+    // live mode).
+    let lastErr;
+    for (let attempt = 1; attempt <= 4; attempt++) {
+        try {
+            await browser.navigate(options.startUrl, { waitStrategy: "domcontentloaded" });
+            lastErr = undefined;
+            break;
+        }
+        catch (navErr) {
+            lastErr = navErr;
+            const isTransient = /ERR_NETWORK_CHANGED|ERR_CONNECTION|ERR_TIMED_OUT|Timeout/i.test(lastErr.message);
+            if (attempt === 4 || !isTransient) {
+                if (!isTransient)
+                    throw lastErr;
+            }
+            await new Promise(r => setTimeout(r, 2500 * attempt));
+        }
+    }
+    if (lastErr)
+        throw lastErr;
+    // Inject into the freshly-loaded page (init script may have raced the navigation)
+    await installMouseOverlay();
     // Apply geolocation at runtime as well (ensures permission is granted after context exists)
     if (effectiveLocation.geolocation) {
         await browser.setGeolocationRuntime(effectiveLocation.geolocation);
@@ -312,8 +952,104 @@ export async function runCognitiveJourney(options) {
     const frictionPoints = [];
     const startTime = Date.now();
     const maxSteps = options.maxSteps || 50;
-    // Build system prompt
-    const systemPrompt = buildCognitiveSystemPrompt(personaObj, profile, options.goal, thresholds);
+    // ── Returning-visit familiarity boost ─────────────────────────────────
+    // The persona's existing siteFamiliarity trait already drives perception
+    // (navigation weighting in attention-transport, scan-path defaults, etc.).
+    // Rather than bolt a separate "memory" mechanism on top, we LIFT
+    // siteFamiliarity based on prior-visit count so the existing pipeline
+    // automatically reflects "this site feels familiar to me." Saturating
+    // curve: 0 visits = persona's baseline, 1 visit ≈ +0.22, 3 ≈ +0.53,
+    // 5 ≈ +0.72, 10+ ≈ +0.92 — asymptotes near 1.
+    if (options.priorMemory && options.priorMemory.visitCount > 0) {
+        const v = options.priorMemory.visitCount;
+        const familiarityBoost = 1 - Math.exp(-v / 4);
+        const baseline = traits.siteFamiliarity ?? 0.5;
+        // Boost toward 1.0 from baseline. The persona keeps any fundamental
+        // cognitive trait (e.g. low transferLearning still matters) but the
+        // domain-specific familiarity component lifts.
+        traits.siteFamiliarity = Math.min(1, baseline + (1 - baseline) * familiarityBoost);
+        if (options.verbose) {
+            console.log(`👁️ siteFamiliarity ${baseline.toFixed(2)} → ${traits.siteFamiliarity.toFixed(2)} (visit #${v + 1})`);
+        }
+    }
+    // ── Time-of-day / circadian modulation ────────────────────────────────
+    // Layered ON TOP of the persona's base traits. Same persona at 11pm Fri
+    // is less patient, less curious about exploring, and more distractible
+    // than at 10am Tue. Modulators are additive deltas clamped to [-0.4, 0.4].
+    // Falls back to server-current time + UTC if no temporalContext provided.
+    let temporalModulators = null;
+    let temporalState = null;
+    try {
+        const { getTemporalState, computeTemporalModulators } = await import("./temporal.js");
+        const tCtx = options.temporalContext ?? { now: new Date() };
+        temporalState = getTemporalState(tCtx);
+        temporalModulators = computeTemporalModulators(temporalState);
+        // Apply trait deltas
+        traits.patience = Math.max(0, Math.min(1, (traits.patience ?? 0.5) + temporalModulators.patienceDelta));
+        if (traits.workingMemory !== undefined) {
+            traits.workingMemory = Math.max(0, Math.min(1, traits.workingMemory + temporalModulators.workingMemoryDelta));
+        }
+        if (traits.curiosity !== undefined) {
+            traits.curiosity = Math.max(0, Math.min(1, traits.curiosity + temporalModulators.curiosityDelta));
+        }
+        if (traits.metacognitivePlanning !== undefined) {
+            traits.metacognitivePlanning = Math.max(0, Math.min(1, traits.metacognitivePlanning + temporalModulators.metacognitiveDelta));
+        }
+        if (options.verbose) {
+            console.log(`🕐 Temporal: ${temporalState.description} (energy ${temporalState.energy.toFixed(2)})`);
+            console.log(`   Δ patience ${temporalModulators.patienceDelta >= 0 ? "+" : ""}${temporalModulators.patienceDelta.toFixed(2)}, distraction rate ${(temporalModulators.distractionRate * 100).toFixed(0)}%`);
+        }
+    }
+    catch (e) {
+        console.warn(`[cognitive] temporal modulation skipped: ${e.message}`);
+    }
+    // Build system prompt AFTER the familiarity AND temporal adjustments so
+    // any prompt strings derived from traits use the modulated values. Then
+    // append a returning-visit recall block with concrete observations.
+    let systemPrompt = buildCognitiveSystemPrompt(personaObj, profile, options.goal, thresholds);
+    if (options.priorMemory && options.priorMemory.visitCount > 0) {
+        const m = options.priorMemory;
+        const sinceDays = m.lastVisitAt
+            ? Math.round((Date.now() - new Date(m.lastVisitAt.replace(" ", "T") + "Z").getTime()) / (1000 * 60 * 60 * 24))
+            : null;
+        const sinceStr = sinceDays === null
+            ? "before"
+            : sinceDays === 0 ? "earlier today" : sinceDays === 1 ? "yesterday" : `${sinceDays} days ago`;
+        const outcomeStr = m.lastOutcome
+            ? (m.lastOutcome.achieved
+                ? `Last visit you achieved your goal (${m.lastOutcome.reason}).`
+                : `Last visit you abandoned (${m.lastOutcome.reason}).`)
+            : "";
+        const obsStr = m.observations.length
+            ? `\nThings you remember about this site:\n${m.observations.map(o => `  • ${o}`).join("\n")}`
+            : "";
+        const baselineStr = m.emotionalBaseline
+            ? `\nYour residual feeling about this site (decayed since ${sinceStr}): satisfaction=${m.emotionalBaseline.satisfaction.toFixed(2)}, frustration=${m.emotionalBaseline.frustration.toFixed(2)}.`
+            : "";
+        const memBlock = `
+
+— RETURNING-VISIT CONTEXT —
+This is your ${m.visitCount + 1}${ordinalSuffix(m.visitCount + 1)} visit to this site (last visited ${sinceStr}). ${outcomeStr}${obsStr}${baselineStr}
+Use this memory naturally — don't recite it, but let it shape your patience, your scan path, and your defaults. If your last visit ended in frustration, that residue carries; if you've used the search before, you'll head there again before scrolling.`;
+        systemPrompt += memBlock;
+    }
+    // Append time-of-day context — short, naturalistic. The trait deltas
+    // already shifted the persona's behavior implicitly; this string makes
+    // the framing recallable in monologue ("It's late and I just want this
+    // done").
+    if (temporalState) {
+        systemPrompt += `
+
+— WHEN —
+Right now it's ${temporalState.description}.`;
+    }
+    // Seed emotional state from carried-over baseline so the persona starts the
+    // session feeling whatever decayed-residue from last time, not pure neutral.
+    if (options.priorMemory?.emotionalBaseline && state.emotionalState) {
+        const b = options.priorMemory.emotionalBaseline;
+        state.emotionalState.satisfaction = Math.min(1, Math.max(0, state.emotionalState.satisfaction + b.satisfaction));
+        state.emotionalState.frustration = Math.min(1, Math.max(0, state.emotionalState.frustration + b.frustration));
+    }
     // Conversation history for Claude
     const messages = [];
     let goalAchieved = false;
@@ -322,6 +1058,16 @@ export async function runCognitiveJourney(options) {
     let currentUrl = options.startUrl;
     let goalEvidence;
     let failureReason;
+    // Last action outcome — fed into the next step's prompt so the AI gets a
+    // structured "what changed" report instead of having to infer from raw state.
+    // Without this, Claude often reasons as if the page is unchanged when in fact
+    // a navigation happened (or vice versa).
+    let lastActionOutcome = null;
+    let prevClickableTexts = new Set();
+    let prevScrollY = 0;
+    // Per-URL last-captured scroll Y. Drives screenshot gating: capture on first
+    // visit to a URL or when subsequent scroll exceeds 100px since last capture.
+    const lastScreenshotScroll = new Map();
     // v18.29.0: Step-by-step journey log with path, elements, evidence
     const journeyLog = [];
     // Main cognitive loop
@@ -334,30 +1080,134 @@ export async function runCognitiveJourney(options) {
             abandonmentMessage = `I've spent too long on this (${Math.round(state.timeElapsed)}s). Giving up.`;
             break;
         }
-        // Get page state via screenshot
-        const screenshotPath = await browser.screenshot();
-        // Get page info and available elements
+        // Ambient distraction roll — phone buzz, kid asks question, doorbell.
+        // Rate driven by circadian energy: ~3% per step at peak alertness, up
+        // to ~25% when tired. Skipped on step 1 (just landed, focused).
+        if (temporalModulators && step > 1) {
+            const { rollDistraction } = await import("./temporal.js");
+            const distractMs = rollDistraction(temporalModulators);
+            if (distractMs > 0) {
+                if (options.verbose)
+                    console.log(`📵 Distraction: ${(distractMs / 1000).toFixed(1)}s pause`);
+                await new Promise(r => setTimeout(r, distractMs));
+            }
+        }
+        // Get page info first (cheap) so we can decide whether to screenshot.
+        // bringToFront ensures the persona's tab is the visible one in chromium
+        // — important for VNC viewers when a click opened a new tab.
         const page = await browser.getPage();
+        try {
+            await page.bringToFront();
+        }
+        catch { /* page may have been closed */ }
+        // Browser health check — chromium's renderer can freeze on heavy pages,
+        // leaving the VNC stream black while the worker keeps stepping. A trivial
+        // page.evaluate that times out >5s means the renderer is unresponsive.
+        // Abort the journey rather than wedging until the 10-min hard cap.
+        try {
+            await Promise.race([
+                page.evaluate("1+1"),
+                new Promise((_, rej) => setTimeout(() => rej(new Error("renderer health check timed out")), 5000)),
+            ]);
+        }
+        catch (healthErr) {
+            console.warn(`[cognitive] step ${step}: ${healthErr.message} — aborting journey`);
+            abandonmentReason = "timeout";
+            abandonmentMessage = `Browser became unresponsive on step ${step}. (${healthErr.message})`;
+            break;
+        }
         const pageTitle = await page.title() || "Current Page";
         const availableElements = await browser.getAvailableClickables();
         const availableInputs = await browser.getAvailableInputs();
-        // Extract visible page content (headings, paragraphs, etc.)
+        const viewportCtx = await browser.getViewportContext();
+        // Screenshot gating: only capture on (a) initial page load — first step
+        // ever for this URL, OR (b) when scroll position changed >100px since the
+        // last capture. This avoids spamming the disk with near-identical frames
+        // on tiny scroll/click steps and keeps the per-step paths renderer
+        // limited to meaningful visual transitions.
+        const screenshotKey = currentUrl.split('?')[0]; // strip query for stable keying
+        const lastCapturedScrollY = lastScreenshotScroll.get(screenshotKey);
+        const isInitialLoadForUrl = lastCapturedScrollY === undefined;
+        const scrolledEnough = lastCapturedScrollY !== undefined && Math.abs(viewportCtx.scroll.y - lastCapturedScrollY) > 100;
+        const shouldCapture = isInitialLoadForUrl || scrolledEnough;
+        let screenshotPath;
+        let attentionHeatmapBase64;
+        if (shouldCapture) {
+            // Live mode renders the heatmap IN the browser via canvas overlay
+            // (see ATTENTION_OVERLAY_SCRIPT) so VNC picks it up natively. We just
+            // poke the in-page recompute on capture triggers so it refreshes when
+            // the page shape changes; the canvas already responds to scroll/resize
+            // automatically. Server-side heatmap generation only runs for non-live
+            // (or backwards-compat) callers.
+            const screenshotP = browser.screenshot().catch(() => undefined);
+            lastScreenshotScroll.set(screenshotKey, viewportCtx.scroll.y);
+            if (options.enableMouseOverlay) {
+                try {
+                    await page.evaluate(`window.__cbAttentionRefresh && window.__cbAttentionRefresh()`);
+                }
+                catch { /* page navigated mid-call */ }
+            }
+            // Wait for screenshot to finish (started in parallel above)
+            screenshotPath = await screenshotP;
+        }
+        // Compute "what changed since last step" so the AI gets a structured diff
+        // instead of having to re-derive it from raw state. Only meaningful from
+        // step 2 onward (step 1 has no prior to compare against).
+        if (lastActionOutcome) {
+            const currentTexts = new Set(availableElements.map(e => e.text));
+            const newClickables = [...currentTexts].filter(t => t && !prevClickableTexts.has(t)).slice(0, 8);
+            const removedClickables = [...prevClickableTexts].filter(t => t && !currentTexts.has(t)).slice(0, 8);
+            lastActionOutcome.newClickables = newClickables;
+            lastActionOutcome.removedClickables = removedClickables;
+            lastActionOutcome.scrollDelta = viewportCtx.scroll.y - prevScrollY;
+        }
+        prevClickableTexts = new Set(availableElements.map(e => e.text));
+        prevScrollY = viewportCtx.scroll.y;
+        // Extract visible page content. The old version grabbed the first 3 H1/H2/H3
+        // and first 3 paragraphs by document order — meaning a Pricing page often
+        // omitted the actual prices, and a long article omitted its body. The new
+        // version walks the visible viewport and captures every meaningful text
+        // node above-the-fold + a band just below, ordered top-to-bottom.
         const pageContent = await page.evaluate(() => {
-            const content = [];
-            // Get main headings
-            document.querySelectorAll('h1, h2, h3').forEach(el => {
+            const vh = window.innerHeight;
+            const lookahead = vh * 0.4; // include a strip just below the fold so AI can plan ahead
+            const out = [];
+            const skipTags = new Set(['SCRIPT', 'STYLE', 'NOSCRIPT', 'svg', 'IFRAME']);
+            const nodes = document.querySelectorAll('h1, h2, h3, h4, p, li, td, th, [role="heading"], [data-testid]');
+            nodes.forEach(el => {
+                if (skipTags.has(el.tagName))
+                    return;
+                const r = el.getBoundingClientRect();
+                if (r.bottom < -50)
+                    return; // above viewport
+                if (r.top > vh + lookahead)
+                    return; // far below
+                if (r.width < 20 || r.height < 8)
+                    return;
+                const style = window.getComputedStyle(el);
+                if (style.display === 'none' || style.visibility === 'hidden')
+                    return;
                 const text = el.innerText?.trim();
-                if (text && text.length < 100)
-                    content.push(`[${el.tagName}] ${text}`);
+                if (!text || text.length < 3)
+                    return;
+                // Trim long paragraphs but keep prices/key info
+                const trimmed = text.length > 220 ? text.substring(0, 220) + '…' : text;
+                const tag = el.tagName.toLowerCase();
+                const tagLabel = ['h1', 'h2', 'h3', 'h4'].includes(tag) ? tag.toUpperCase() : tag;
+                const visMark = r.top < vh && r.bottom > 0 ? '👁' : '↓';
+                out.push({ y: r.top, line: `${visMark}[${tagLabel}] ${trimmed}` });
             });
-            // Get key paragraphs (first 3)
-            const paragraphs = Array.from(document.querySelectorAll('p, .content, main, article'));
-            paragraphs.slice(0, 3).forEach(el => {
-                const text = el.innerText?.trim().substring(0, 200);
-                if (text && text.length > 20)
-                    content.push(`[content] ${text}...`);
-            });
-            return content.slice(0, 10).join('\n');
+            out.sort((a, b) => a.y - b.y);
+            // Dedup adjacent identical lines (common in nested elements)
+            const dedup = [];
+            let prev = '';
+            for (const o of out) {
+                if (o.line !== prev) {
+                    dedup.push(o.line);
+                    prev = o.line;
+                }
+            }
+            return dedup.slice(0, 30).join('\n');
         }).catch(() => '');
         // Habituation/Banner Blindness tracking (v10.1.0)
         // Detect UI patterns in available elements and update habituation state
@@ -374,7 +1224,7 @@ export async function runCognitiveJourney(options) {
             }
         }
         // Build step prompt with available elements so Claude knows what's clickable and fillable
-        const stepPrompt = buildStepPrompt(state, currentUrl, pageTitle, step, availableElements, availableInputs, pageContent);
+        const stepPrompt = buildStepPrompt(state, currentUrl, pageTitle, step, availableElements, availableInputs, pageContent, viewportCtx, lastActionOutcome);
         // Build message content - with or without vision
         let messageContent;
         if (options.vision && screenshotPath && existsSync(screenshotPath)) {
@@ -410,80 +1260,163 @@ export async function runCognitiveJourney(options) {
         messages.push({ role: "assistant", content: assistantMessage });
         // Parse Claude's response
         const parsed = parseCognitiveResponse(assistantMessage);
-        // Update state with Claude's assessment
-        state.confusionLevel = parsed.newConfusion ?? state.confusionLevel;
-        state.frustrationLevel = parsed.newFrustration ?? state.frustrationLevel;
-        state.goalProgress = parsed.goalProgress ?? state.goalProgress;
+        // Capture URL BEFORE we apply any action. We use the previous URL +
+        // the post-action URL to gate goal progress on real evidence — Claude's
+        // self-reported progress is taken as a *signal*, but only allowed to
+        // advance the canonical goalProgress if a concrete action actually
+        // happened (URL changed, an interactive action succeeded, etc).
+        const urlBeforeAction = currentUrl;
         state.currentMood = parsed.mood ?? state.currentMood;
-        // Deplete patience
-        state.patienceRemaining -= 0.02 + state.frustrationLevel * 0.05;
-        // Resilience: Time-based frustration decay (v10.6.0)
-        // Research: Brief Resilience Scale operationalizes resilience as
-        // "rate of decrease in stress markers" (Smith et al., 2008)
-        // Higher resilience = faster emotional recovery each step
-        const resilience = traits.resilience ?? 0.3; // Default to moderate resilience
-        if (state.frustrationLevel > 0) {
-            state.frustrationLevel = Math.max(0, state.frustrationLevel - resilience * 0.04);
-        }
-        // Emotional State Updates (v13.1.0) - Scherer's Appraisal Theory
+        // ─── Single source of truth: drive everything through emotionalState ───
+        //
+        // Previously we wrote `state.confusionLevel = parsed.newConfusion`
+        // and `state.frustrationLevel = parsed.newFrustration` directly,
+        // running in parallel with the Scherer EmotionalState updates below.
+        // Two systems, two truths, drift every step.
+        //
+        // Now: Claude's reported values are SIGNALS that fire emotional triggers
+        // on the canonical EmotionalState. After the trigger applies and the
+        // state decays (with persona-trait-modulated rates), we sync the
+        // simplified-view fields (confusionLevel / frustrationLevel /
+        // patienceRemaining) from the canonical store via deriveSimplifiedState.
+        //
+        // Consumers (worker, dashboard, MCP tools, persona-comparison) keep
+        // reading the same field names; the values are just consistent now.
         if (state.emotionalState) {
-            // Determine emotional trigger based on action outcome
+            // Determine triggers from the action outcome. Claude reports what
+            // happened; we translate those signals into emotional triggers.
             const actionSuccess = parsed.actionSuccess !== false;
-            const progressMade = (parsed.goalProgress ?? 0) > state.goalProgress;
-            const confusionIncreased = (parsed.newConfusion ?? 0) > state.confusionLevel;
-            const frustrationIncreased = (parsed.newFrustration ?? 0) > state.frustrationLevel;
-            let emotionalTrigger = null;
-            let triggerSeverity = 1.0;
-            let triggerDescription = "";
+            const claudeConfusion = parsed.newConfusion ?? state.emotionalState.confusion;
+            const claudeFrustration = parsed.newFrustration ?? state.emotionalState.frustration;
+            const confusionIncreased = claudeConfusion > state.emotionalState.confusion + 0.05;
+            const confusionDecreased = claudeConfusion < state.emotionalState.confusion - 0.05;
+            const frustrationIncreased = claudeFrustration > state.emotionalState.frustration + 0.05;
+            // Severity scales with the magnitude of the LLM-reported delta — Claude
+            // proposes a value, we use the *delta* (clamped to [0, 1]) as the
+            // trigger's intensity, instead of trusting Claude's absolute number.
+            const confusionDelta = Math.max(0, Math.min(1, claudeConfusion - state.emotionalState.confusion));
+            const frustrationDelta = Math.max(0, Math.min(1, claudeFrustration - state.emotionalState.frustration));
+            // Triggers are evaluated in priority order; first match wins. Multiple
+            // matched signals can fire sequentially below if both are strong.
+            const triggersToFire = [];
             if (!actionSuccess && parsed.errorMessage) {
-                emotionalTrigger = "error";
-                triggerDescription = parsed.errorMessage;
-                triggerSeverity = 1.2;
+                triggersToFire.push({ trigger: "error", severity: 1.2, description: parsed.errorMessage });
             }
             else if (!actionSuccess) {
-                emotionalTrigger = "failure";
-                triggerDescription = "Action did not succeed";
+                triggersToFire.push({ trigger: "failure", severity: 1.0, description: "Action did not succeed" });
             }
-            else if (progressMade) {
-                emotionalTrigger = "progress";
-                triggerDescription = "Made progress toward goal";
+            // Progress is now an EVIDENCE-GATED trigger — see goalProgressDelta below.
+            if (confusionIncreased) {
+                triggersToFire.push({
+                    trigger: "confusion_onset",
+                    severity: Math.max(0.5, confusionDelta * 2),
+                    description: parsed.frictionDescription || "UI became confusing",
+                });
             }
-            else if (confusionIncreased) {
-                emotionalTrigger = "confusion_onset";
-                triggerDescription = parsed.frictionDescription || "UI became confusing";
+            else if (confusionDecreased) {
+                // NEW trigger: when Claude reports clarity, fire the existing
+                // "clarity" trigger — previously this only happened implicitly
+                // via decay.
+                triggersToFire.push({
+                    trigger: "clarity",
+                    severity: 0.8,
+                    description: "UI became clear",
+                });
             }
-            else if (frustrationIncreased) {
-                emotionalTrigger = "setback";
-                triggerDescription = "Encountered obstacle";
+            if (frustrationIncreased && actionSuccess) {
+                // Friction without outright failure
+                triggersToFire.push({
+                    trigger: "setback",
+                    severity: Math.max(0.5, frustrationDelta * 2),
+                    description: "Encountered friction",
+                });
             }
-            else if (state.patienceRemaining < 0.3) {
-                emotionalTrigger = "time_pressure";
-                triggerDescription = "Running out of patience";
-                triggerSeverity = 0.8;
+            // Time pressure fires when patience is already derived-low (recompute
+            // briefly here using current state for the gating check).
+            const patiencePreview = deriveSimplifiedState(state.emotionalState, traits).patienceRemaining;
+            if (patiencePreview < 0.3 && !triggersToFire.length) {
+                triggersToFire.push({
+                    trigger: "time_pressure",
+                    severity: 0.8,
+                    description: "Running out of patience",
+                });
             }
-            else if (actionSuccess && !confusionIncreased) {
-                emotionalTrigger = "success";
-                triggerDescription = parsed.action || "Action completed";
-                triggerSeverity = 0.8;
+            if (actionSuccess && !triggersToFire.length) {
+                triggersToFire.push({
+                    trigger: "success",
+                    severity: 0.8,
+                    description: parsed.action || "Action completed",
+                });
             }
-            // Apply emotional trigger if detected
-            if (emotionalTrigger) {
-                const { state: newEmotionalState, event } = applyEmotionalTrigger(state.emotionalState, emotionalTrigger, emotionalConfig, state.stepCount, { severity: triggerSeverity, description: triggerDescription });
-                state.emotionalState = newEmotionalState;
+            // Apply each trigger sequentially against the canonical state.
+            for (const t of triggersToFire) {
+                const { state: newEmotional, event } = applyEmotionalTrigger(state.emotionalState, t.trigger, emotionalConfig, state.stepCount, { severity: t.severity, description: t.description });
+                state.emotionalState = newEmotional;
                 state.emotionalJourney?.push(event);
             }
-            // Decay emotions toward baseline each step
-            state.emotionalState = decayEmotions(state.emotionalState, emotionalConfig);
-            // Log emotional state changes in verbose mode
+            // Decay toward baseline using PERSONA-TRAIT-MODULATED rates:
+            //   comprehension speeds confusion recovery
+            //   resilience    speeds frustration recovery
+            //   curiosity     speeds boredom recovery
+            // (Replaces the old uniform decayEmotions + the ad-hoc resilience-
+            //  applied-to-frustrationLevel block.)
+            state.emotionalState = decayEmotionsWithTraits(state.emotionalState, emotionalConfig, traits);
+        }
+        // ─── Evidence-gated goal progress ───
+        //
+        // Claude proposes a goalProgress value. We only ACCEPT it if there's
+        // concrete evidence the action actually advanced things:
+        //   - URL changed (we navigated somewhere new)
+        //   - the action was an interactive one (click/fill/scroll/wait) that succeeded
+        // For in-page progress (URL unchanged but a successful interaction), we
+        // allow at most +0.05 per step — small partial credit.
+        //
+        // This stops Claude's positivity bias from inflating progress without
+        // any real navigation occurring.
+        const llmProposedProgress = parsed.goalProgress ?? state.goalProgress;
+        const progressDeltaProposed = llmProposedProgress - state.goalProgress;
+        let progressDeltaAllowed = 0;
+        if (progressDeltaProposed > 0) {
+            const interactiveActions = new Set(["click", "fill", "navigate", "scroll", "select"]);
+            const wasInteractive = parsed.action ? Array.from(interactiveActions).some(a => parsed.action.toLowerCase().startsWith(a)) : false;
+            const actionSucceeded = parsed.actionSuccess !== false;
+            // Note: urlChanged is finalized after executeAction below; we pre-allow
+            // the LLM's delta if interactive+successful and reconcile post-action.
+            if (wasInteractive && actionSucceeded) {
+                // Allow up to the LLM's proposed delta; URL-change reconciliation later
+                // expands the cap to full LLM proposal if URL changed.
+                progressDeltaAllowed = Math.min(progressDeltaProposed, 0.05);
+            }
+            // No evidence at all → no progress (Claude was hallucinating advancement)
+        }
+        else {
+            // Claude can lower progress freely — that's a backtrack signal.
+            progressDeltaAllowed = progressDeltaProposed;
+        }
+        state.goalProgress = Math.max(0, Math.min(1, state.goalProgress + progressDeltaAllowed));
+        // Stash the proposed progress so the post-action URL-change check can
+        // expand the cap if a navigation actually happened.
+        const _llmProposedProgressDelta = progressDeltaProposed;
+        const _urlBeforeAction = urlBeforeAction;
+        // ─── Sync derived simple-state fields from canonical EmotionalState ───
+        if (state.emotionalState) {
+            const derived = deriveSimplifiedState(state.emotionalState, traits);
+            state.patienceRemaining = derived.patienceRemaining;
+            state.confusionLevel = derived.confusionLevel;
+            state.frustrationLevel = derived.frustrationLevel;
+            // Verbose logging + abandonment heuristic remain useful — moved from
+            // the old single big `if (state.emotionalState) { ... }` block that was
+            // refactored above.
             if (options.verbose && state.emotionalState.dominant !== "neutral") {
                 console.log(`💭 ${describeEmotionalState(state.emotionalState)}`);
             }
-            // Check if emotions suggest abandonment
             const abandonmentCheck = shouldConsiderAbandonment(state.emotionalState);
             if (abandonmentCheck.shouldConsider && options.verbose) {
                 console.log(`⚠️ Emotional abandonment signal: ${abandonmentCheck.reason}`);
             }
         }
+        void _llmProposedProgressDelta;
+        void _urlBeforeAction;
         // Dual-Process Theory: System 1/2 switching (v10.0.0)
         if (state.cognitiveMode) {
             const stepStartTime = Date.now();
@@ -559,6 +1492,10 @@ export async function runCognitiveJourney(options) {
             confusion: state.confusionLevel,
             frustration: state.frustrationLevel,
             timestamp: Date.now(),
+            screenshotPath,
+            attentionHeatmapBase64,
+            scrollY: viewportCtx.scroll.y,
+            viewport: { width: viewportCtx.viewport.width, height: viewportCtx.viewport.height },
         });
         // Record friction point if confusion/frustration spiked
         if (parsed.frictionDescription && (state.confusionLevel > 0.4 || state.frustrationLevel > 0.4)) {
@@ -571,7 +1508,9 @@ export async function runCognitiveJourney(options) {
                 monologue: parsed.monologue || "",
             });
         }
-        // Callback
+        // Callback — emits BEFORE the action so the live viewer renders the
+        // attention overlay first, then the persona acts. The dashboard receives
+        // the heatmap base64 via SSE during this window.
         if (options.onStep) {
             options.onStep({
                 step,
@@ -579,8 +1518,20 @@ export async function runCognitiveJourney(options) {
                 monologue: parsed.monologue || "",
                 action: parsed.action,
                 state: { ...state },
+                screenshotPath,
+                attentionHeatmapBase64,
+                scrollY: viewportCtx.scroll.y,
+                viewport: { width: viewportCtx.viewport.width, height: viewportCtx.viewport.height },
+                url: currentUrl,
             });
         }
+        // Live viewer dwell — when a fresh attention map was computed this step,
+        // hold briefly before executing the action so the viewer can register the
+        // heatmap. 1.2s is enough to glance at it without making the journey feel
+        // sluggish. Skipped on non-capture steps so the journey paces normally.
+        if (options.enableMouseOverlay && attentionHeatmapBase64) {
+            await new Promise((r) => setTimeout(r, 1200));
+        }
         // Verbose output
         if (options.verbose) {
             console.log(`\n━━━ Step ${step} ━━━`);
@@ -632,31 +1583,175 @@ export async function runCognitiveJourney(options) {
         }
         // Execute action if provided
         if (parsed.action) {
+            // Surface the action on-screen so anyone watching the live recording / VNC
+            // can see what's about to happen. Best-effort — never block the action.
+            if (options.enableMouseOverlay) {
+                // Make sure overlay is present on the current page (a previous action
+                // may have navigated and the init script raced our page.evaluate).
+                await installMouseOverlay();
+                try {
+                    const p = await browser.getPage();
+                    const label = parsed.actionTarget ? `${parsed.action}  →  ${parsed.actionTarget}` : parsed.action;
+                    await p.evaluate((t) => {
+                        // @ts-expect-error window helper installed by overlay script
+                        if (window.__cbShowAction)
+                            window.__cbShowAction(t);
+                    }, label.slice(0, 120));
+                }
+                catch { /* page navigated mid-call, helper will reinstall */ }
+            }
             try {
-                const result = await executeAction(browser, parsed.action, fittsParams, state.gazeMouseLag);
+                const indexMatch = /^click:#(\d+)$/.exec(parsed.action);
+                const textMatch = /^click:(.+)$/.exec(parsed.action);
+                let target;
+                if (indexMatch) {
+                    target = availableElements[parseInt(indexMatch[1], 10)];
+                }
+                else if (textMatch && !textMatch[1].startsWith("#")) {
+                    // Find best element match by text. Prefer (1) exact match, then
+                    // (2) starts-with, then (3) includes; among ties, pick the one
+                    // closest to the current viewport center.
+                    const wanted = textMatch[1].trim().toLowerCase();
+                    const vc = viewportCtx.viewport.height / 2;
+                    const candidates = availableElements.filter(e => e.text);
+                    const score = (e) => {
+                        const t = (e.text || "").toLowerCase().trim();
+                        if (!t)
+                            return -Infinity;
+                        let base = 0;
+                        if (t === wanted)
+                            base = 1000;
+                        else if (t.startsWith(wanted) || wanted.startsWith(t))
+                            base = 500;
+                        else if (t.includes(wanted) || wanted.includes(t))
+                            base = 100;
+                        else
+                            return -Infinity;
+                        // Penalize distance from viewport center (closer = preferred)
+                        const ey = (e.y ?? 0) + (e.height ?? 0) / 2;
+                        const dist = Math.abs(ey - vc);
+                        return base - Math.min(dist, 5000);
+                    };
+                    let best;
+                    let bestScore = -Infinity;
+                    for (const e of candidates) {
+                        const s = score(e);
+                        if (s > bestScore) {
+                            bestScore = s;
+                            best = e;
+                        }
+                    }
+                    if (best && bestScore > 0)
+                        target = best;
+                }
+                let result;
+                const hasBbox = target && typeof target.x === "number" && typeof target.y === "number"
+                    && typeof target.width === "number" && typeof target.height === "number";
+                if (hasBbox && target) {
+                    const page = await browser.getPage();
+                    const urlBefore = page.url();
+                    const cx = target.x + target.width / 2;
+                    const cy = target.y + target.height / 2;
+                    try {
+                        // Only scroll if the element is OFF-screen. Scrolling an already-
+                        // visible element causes pointless jitter that stacks with any
+                        // page-level smooth-scroll handler firing on click.
+                        const inView = cy >= 0 && cy <= viewportCtx.viewport.height;
+                        if (!inView) {
+                            await page.evaluate(({ y }) => {
+                                const docTop = window.scrollY + y;
+                                const t = Math.max(0, docTop - window.innerHeight / 2);
+                                // "instant" behavior — no animation, no stacking with page handlers
+                                window.scrollTo({ top: t, behavior: "instant" });
+                            }, { y: cy });
+                            await page.waitForTimeout(150);
+                        }
+                        // Re-read post-scroll coords; click at center via raw mouse so
+                        // Playwright's locator auto-scroll-into-view never engages.
+                        const fresh = await page.evaluate(({ sel }) => {
+                            const el = document.querySelector(sel);
+                            if (!el)
+                                return null;
+                            const r = el.getBoundingClientRect();
+                            return { x: r.left + r.width / 2, y: r.top + r.height / 2, w: r.width, h: r.height };
+                        }, { sel: target.selector });
+                        const ctr = (fresh && fresh.x > 0 && fresh.y > 0)
+                            ? { x: fresh.x, y: fresh.y, w: fresh.w, h: fresh.h }
+                            : { x: cx, y: cy, w: target.width, h: target.height };
+                        if (options.humanInput) {
+                            const { humanClick } = await import("../visual/human-input.js");
+                            await humanClick(page, ctr.x, ctr.y, inputTraits, { width: ctr.w, height: ctr.h });
+                        }
+                        else {
+                            await page.mouse.click(ctr.x, ctr.y);
+                        }
+                        await page.waitForTimeout(800);
+                        const urlAfter = page.url();
+                        result = { success: true, ...(urlAfter !== urlBefore ? { newUrl: urlAfter } : {}) };
+                    }
+                    catch (clickErr) {
+                        console.warn(`[cognitive] coordinate click failed: ${clickErr.message}`);
+                        const fallback = target.text ? `click:${target.text}` : parsed.action;
+                        result = await executeAction(browser, fallback, fittsParams, state.gazeMouseLag, options.humanInput, inputTraits);
+                    }
+                }
+                else {
+                    // No bbox — let executeAction handle (non-click actions, or click
+                    // text not found in availableElements).
+                    result = await executeAction(browser, parsed.action, fittsParams, state.gazeMouseLag, options.humanInput, inputTraits);
+                }
+                // Inter-action settle pause — humans don't fire actions back-to-back
+                // at machine speed. Modulated by patience + readingTendency so an
+                // impatient persona snaps through faster than a thorough one.
+                if (options.humanInput) {
+                    const { humanSettle } = await import("../visual/human-input.js");
+                    await humanSettle(inputTraits);
+                }
                 state.memory.actionsAttempted.push({
                     action: parsed.action,
                     target: parsed.actionTarget,
                     success: result.success,
                 });
                 // Track page visits if URL changed
+                const urlChanged = !!result.newUrl && result.newUrl !== _urlBeforeAction;
+                // Record the outcome for the next step's prompt. The diff fields
+                // (newClickables, removedClickables, scrollDelta) are filled in at
+                // the top of step N+1 by comparing the fresh perception to the cache.
+                lastActionOutcome = {
+                    action: parsed.action,
+                    target: parsed.actionTarget,
+                    success: result.success,
+                    urlChanged,
+                    fromUrl: _urlBeforeAction,
+                    toUrl: result.newUrl ?? _urlBeforeAction,
+                };
                 if (result.newUrl && !state.memory.pagesVisited.includes(result.newUrl)) {
                     state.memory.pagesVisited.push(result.newUrl);
                     currentUrl = result.newUrl;
                 }
-                // Resilience: Success-triggered recovery (v10.6.0)
-                // Research: Cognitive reappraisal meta-analysis shows positive outcomes
-                // enhance personal resilience (PMC 2024). Success = positive reframe.
-                // Progress made = significant recovery; simple success = minor recovery
-                if (result.success) {
-                    const progressMade = result.newUrl || state.goalProgress > 0.1;
-                    const recoveryAmount = progressMade
-                        ? resilience * 0.20 // Major recovery on progress
-                        : resilience * 0.08; // Minor recovery on any success
-                    state.frustrationLevel = Math.max(0, state.frustrationLevel - recoveryAmount);
-                    // "Second wind" effect: patience partially restored on progress
-                    if (progressMade) {
-                        state.patienceRemaining = Math.min(1, state.patienceRemaining + resilience * 0.08);
+                // ─── Post-action evidence reconciliation ───
+                // Goal progress cap was previously +0.05 max (no-evidence fallback).
+                // If the URL actually changed, expand the cap to the LLM's full
+                // proposed delta — that's strong navigation evidence.
+                if (urlChanged && _llmProposedProgressDelta > 0.05) {
+                    const additionalAllowed = _llmProposedProgressDelta - 0.05;
+                    state.goalProgress = Math.min(1, state.goalProgress + additionalAllowed);
+                }
+                // Action result feeds back into the canonical EmotionalState via triggers.
+                // Replaces the prior direct writes to state.frustrationLevel / patienceRemaining,
+                // which were overwritten next step by deriveSimplifiedState anyway.
+                if (state.emotionalState) {
+                    if (result.success) {
+                        const progressMade = urlChanged || state.goalProgress > 0.1;
+                        // Progress = stronger positive trigger than plain success
+                        const { state: newEmotional, event } = applyEmotionalTrigger(state.emotionalState, progressMade ? "progress" : "success", emotionalConfig, state.stepCount, {
+                            severity: progressMade ? 1.2 : 0.8,
+                            description: progressMade
+                                ? `Action advanced goal (${urlChanged ? "URL change" : "in-page progress"})`
+                                : `Action completed: ${parsed.action}`,
+                        });
+                        state.emotionalState = newEmotional;
+                        state.emotionalJourney?.push(event);
                     }
                 }
             }
@@ -665,7 +1760,32 @@ export async function runCognitiveJourney(options) {
                     error: error instanceof Error ? error.message : String(error),
                     context: `Step ${step}: ${parsed.action}`,
                 });
-                state.frustrationLevel = Math.min(1, state.frustrationLevel + 0.15);
+                lastActionOutcome = {
+                    action: parsed.action,
+                    target: parsed.actionTarget,
+                    success: false,
+                    urlChanged: false,
+                    fromUrl: _urlBeforeAction,
+                };
+                // Action threw — fire an error trigger on canonical state.
+                if (state.emotionalState) {
+                    const { state: newEmotional, event } = applyEmotionalTrigger(state.emotionalState, "error", emotionalConfig, state.stepCount, {
+                        severity: 1.3,
+                        description: error instanceof Error ? error.message : String(error),
+                    });
+                    state.emotionalState = newEmotional;
+                    state.emotionalJourney?.push(event);
+                }
+            }
+            // Re-sync derived simple-state fields from canonical state after
+            // post-action triggers have applied. Consumers that read
+            // state.patienceRemaining / confusionLevel / frustrationLevel see the
+            // up-to-date derived values.
+            if (state.emotionalState) {
+                const derived = deriveSimplifiedState(state.emotionalState, traits);
+                state.patienceRemaining = derived.patienceRemaining;
+                state.confusionLevel = derived.confusionLevel;
+                state.frustrationLevel = derived.frustrationLevel;
             }
             // Update decision fatigue (v9.9.0)
             // Every action is a decision - fatigue accumulates
@@ -868,13 +1988,32 @@ BEHAVIOR GUIDELINES:
 
 Always respond with valid JSON.`;
 }
-function buildStepPrompt(state, currentUrl, pageTitle, step, availableElements = [], availableInputs = [], pageContent = "") {
+function buildStepPrompt(state, currentUrl, pageTitle, step, availableElements = [], availableInputs = [], pageContent = "", viewportCtx, lastOutcome) {
+    // Group clickables by region so the AI can disambiguate "Pricing" in nav vs hero vs footer.
+    // Index each element so the AI can use [#3] style references when text isn't unique.
     const elementsStr = availableElements.length > 0
-        ? availableElements.map((e, i) => {
-            // Prominence hint: first few elements are typically most visible (above fold, larger)
-            const prominence = i < 5 ? ' ★ prominent' : i < 10 ? ' visible' : '';
-            return `  - "${e.text}" (${e.tag}${e.role ? `, role=${e.role}` : ""}${prominence})`;
-        }).join("\n")
+        ? (() => {
+            const groups = {};
+            availableElements.forEach((e, i) => {
+                const region = e.region ?? 'unknown';
+                const aboveFold = e.aboveFold;
+                const x = e.x;
+                const y = e.y;
+                const visMark = aboveFold ? '👁' : '↓';
+                const posStr = (typeof x === 'number' && typeof y === 'number') ? ` @(${x},${y})` : '';
+                const line = `  [#${i}] ${visMark} "${e.text}" (${e.tag}${e.role ? `, role=${e.role}` : ''}${posStr})`;
+                (groups[region] ??= []).push(line);
+            });
+            const order = ['header-nav', 'top-bar', 'modal', 'main-visible', 'form', 'sidebar', 'below-fold', 'footer', 'unknown'];
+            const out = [];
+            for (const r of order) {
+                if (groups[r]?.length) {
+                    out.push(`  — ${r.toUpperCase()} —`);
+                    out.push(...groups[r]);
+                }
+            }
+            return out.join('\n');
+        })()
         : "  (no clickable elements detected)";
     // Format inputs - highlight hidden ones with their triggers, show options for selects
     const inputsStr = availableInputs.length > 0
@@ -896,13 +2035,58 @@ function buildStepPrompt(state, currentUrl, pageTitle, step, availableElements =
     const contentStr = pageContent
         ? `\nVISIBLE PAGE CONTENT:\n${pageContent}\n`
         : "";
+    // Viewport / scroll / overlay summary — gives the AI ground truth about what
+    // is on screen NOW. Without this it has no idea if it just scrolled.
+    let viewportStr = "";
+    if (viewportCtx) {
+        const { viewport, scroll, headings, activeModals, formErrors, bannersBlocking } = viewportCtx;
+        const visHeadings = headings.filter(h => h.visible).slice(0, 6).map(h => `H${h.level}: ${h.text}`).join(' | ');
+        const lines = [
+            `- Viewport: ${viewport.width}×${viewport.height}`,
+            `- Scroll: ${scroll.y}/${scroll.max}px (${Math.round(scroll.pct * 100)}%)${scroll.atTop ? ' [at top]' : ''}${scroll.atBottom ? ' [at bottom]' : ''}`,
+        ];
+        if (visHeadings)
+            lines.push(`- Currently visible headings: ${visHeadings}`);
+        if (activeModals > 0)
+            lines.push(`- ⚠️ ${activeModals} active modal/dialog blocking interaction — try dismiss first`);
+        if (bannersBlocking.length > 0)
+            lines.push(`- ⚠️ Banner blocking content: "${bannersBlocking[0]}" — try dismiss`);
+        if (formErrors.length > 0)
+            lines.push(`- ⚠️ Form errors visible: ${formErrors.join(' | ')}`);
+        viewportStr = `\nVIEWPORT STATE:\n${lines.join('\n')}\n`;
+    }
+    // Action outcome — what actually happened from your last decision. Critical
+    // for grounding the AI's monologue in reality.
+    let outcomeStr = "";
+    if (lastOutcome) {
+        const lines = [];
+        const target = lastOutcome.target ? ` → ${lastOutcome.target}` : '';
+        lines.push(`- Last action: ${lastOutcome.action}${target} — ${lastOutcome.success ? '✓ executed' : '✗ failed'}`);
+        if (lastOutcome.urlChanged) {
+            lines.push(`- Page navigated: ${lastOutcome.fromUrl} → ${lastOutcome.toUrl}`);
+        }
+        else if (lastOutcome.action.startsWith('click')) {
+            lines.push(`- Page did NOT navigate (click had no nav effect — element may be JS-only or wasn't matched)`);
+        }
+        if (typeof lastOutcome.scrollDelta === 'number' && Math.abs(lastOutcome.scrollDelta) > 10) {
+            const dir = lastOutcome.scrollDelta > 0 ? 'down' : 'up';
+            lines.push(`- Scrolled ${dir} ${Math.abs(lastOutcome.scrollDelta)}px`);
+        }
+        if (lastOutcome.newClickables?.length) {
+            lines.push(`- New elements appeared: ${lastOutcome.newClickables.slice(0, 5).map(t => `"${t}"`).join(', ')}`);
+        }
+        if (lastOutcome.removedClickables?.length) {
+            lines.push(`- Elements no longer visible: ${lastOutcome.removedClickables.slice(0, 5).map(t => `"${t}"`).join(', ')}`);
+        }
+        outcomeStr = `\nWHAT HAPPENED LAST STEP:\n${lines.join('\n')}\n`;
+    }
     return `STEP ${step}
 
 CURRENT PAGE:
 - URL: ${currentUrl}
 - Title: ${pageTitle}
-${contentStr}
-AVAILABLE ELEMENTS (clickable):
+${viewportStr}${outcomeStr}${contentStr}
+AVAILABLE ELEMENTS (clickable, grouped by region; 👁=above-fold, ↓=below-fold):
 ${elementsStr}
 
 FORM INPUTS (fillable):
@@ -916,11 +2100,25 @@ CURRENT STATE:
 - Mood: ${state.currentMood}
 - Pages Visited: ${state.memory.pagesVisited.length}
 - Actions Attempted: ${state.memory.actionsAttempted.length}
+${(() => {
+        // Loop detection: if the last 4 actions are alternating scrolls, surface
+        // it loudly so the AI breaks out instead of pumping scroll:down/up forever.
+        const recent = state.memory.actionsAttempted.slice(-4).map(a => a.action || "");
+        if (recent.length >= 4 && recent.every(a => a.startsWith("scroll:"))) {
+            return `\n⚠️ LOOP DETECTED: your last 4 actions were all scrolls (${recent.join(", ")}). Pick a click/back/dismiss/find action instead — scrolling more will not help.`;
+        }
+        // Repeated failed actions
+        const lastTwo = state.memory.actionsAttempted.slice(-2);
+        if (lastTwo.length === 2 && lastTwo.every(a => a.success === false)) {
+            return `\n⚠️ Last 2 actions failed (${lastTwo.map(a => a.action).join(", ")}). The element you wanted may not exist with that exact text — try a click:#N index from AVAILABLE ELEMENTS above, or a different element entirely.`;
+        }
+        return "";
+    })()}
 
-Based on the page content, AVAILABLE ELEMENTS, and FORM INPUTS above, what do you perceive, comprehend, and decide to do?
+Ground your monologue in WHAT HAPPENED LAST STEP and VIEWPORT STATE — don't pretend you see things that aren't in AVAILABLE ELEMENTS or VISIBLE PAGE CONTENT. If the URL did not change after a click, say so explicitly.
 
 ACTIONS (choose one):
-- click:ElementText — click a link or button (use exact text from AVAILABLE ELEMENTS)
+- click:ElementText — click a link or button (use exact text from AVAILABLE ELEMENTS; for ambiguous text use click:#N where N is the [#N] index)
 - fill:FieldName:value — type into a form field
 - scroll:down — scroll down to see more content (TRY THIS FIRST if goal not visible)
 - scroll:up — scroll back up
@@ -936,11 +2134,12 @@ ACTIONS (choose one):
 - wait:ms — wait for content to load
 
 STRATEGY:
-1. If you don't see what you need, scroll:down FIRST — most content is below the fold
-2. If scrolling doesn't help, try find:keyword to search the page
-3. Use back if you navigated to the wrong page
-4. Use dismiss if a popup is blocking you
-5. Only abandon after trying scroll + find + back
+1. If a modal/banner is blocking, dismiss FIRST
+2. If you don't see what you need, scroll:down — most content is below the fold
+3. If a click didn't navigate when you expected it to, the element may have a different selector — try click:#N with the index, or pick a different element
+4. If scrolling doesn't help, try find:keyword to search the page
+5. Use back if you navigated to the wrong page
+6. Only abandon after trying scroll + find + back
 
 Respond in JSON format.`;
 }
@@ -1048,7 +2247,18 @@ function checkAbandonmentTriggers(state, thresholds) {
  * For cognitive simulation, we estimate distance as 300px (average screen movement)
  * and target width as 80px (average button size). Persona traits modify timing.
  */
-async function executeAction(browser, action, fittsParams, gazeMouseLag) {
+function ordinalSuffix(n) {
+    const tens = n % 100;
+    if (tens >= 11 && tens <= 13)
+        return "th";
+    switch (n % 10) {
+        case 1: return "st";
+        case 2: return "nd";
+        case 3: return "rd";
+        default: return "th";
+    }
+}
+async function executeAction(browser, action, fittsParams, gazeMouseLag, humanInput, inputTraits) {
     const [type, ...args] = action.split(":");
     // Apply Fitts' Law timing for mouse actions (v9.9.0)
     let movementTimeMs = 0;
@@ -1063,8 +2273,12 @@ async function executeAction(browser, action, fittsParams, gazeMouseLag) {
         if (gazeMouseLag) {
             movementTimeMs += gazeMouseLag;
         }
-        // Add realistic delay before the click
-        await sleep(movementTimeMs);
+        // When humanInput is enabled, humanClick provides its own hover-and-dwell
+        // pacing — skip the pre-action sleep here so they don't compound (which
+        // would make live mode slower than non-live, defeating the purpose).
+        if (!humanInput) {
+            await sleep(movementTimeMs);
+        }
     }
     switch (type) {
         case "click": {
@@ -1138,6 +2352,33 @@ async function executeAction(browser, action, fittsParams, gazeMouseLag) {
         case "fill": {
             const [selector, ...valueParts] = args;
             const value = valueParts.join(":");
+            if (humanInput) {
+                // Human-realistic typing: focus the field, then type char-by-char
+                // with Gaussian timing, occasional typos, and thinking pauses.
+                const page = await browser.getPage();
+                try {
+                    // Find the field by selector or label/placeholder
+                    const loc = page.locator(selector).first();
+                    if (await loc.count() === 0) {
+                        // Fallback to fill which has fuzzier matching
+                        const r = await browser.fill(selector, value);
+                        return { success: r.success };
+                    }
+                    await loc.scrollIntoViewIfNeeded({ timeout: 2000 }).catch(() => { });
+                    await loc.click({ timeout: 3000 });
+                    // Clear if there's existing content
+                    await page.keyboard.press("Control+A").catch(() => { });
+                    await page.keyboard.press("Delete").catch(() => { });
+                    const { humanType } = await import("../visual/human-input.js");
+                    await humanType(page, value, inputTraits);
+                    return { success: true };
+                }
+                catch (err) {
+                    // Fall back to instant fill if anything goes wrong
+                    const r = await browser.fill(selector, value);
+                    return { success: r.success };
+                }
+            }
             // Apply KLM timing for typing (v9.10.0)
             // Use age modifier as proxy for typing expertise (younger = faster)
             const expertise = fittsParams?.ageModifier
@@ -1160,24 +2401,37 @@ async function executeAction(browser, action, fittsParams, gazeMouseLag) {
             const direction = args[0]?.toLowerCase() || "down";
             const page = await browser.getPage();
             try {
-                switch (direction) {
-                    case "top":
-                        await page.evaluate(() => window.scrollTo({ top: 0, behavior: "smooth" }));
-                        break;
-                    case "bottom":
-                        await page.evaluate(() => window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" }));
-                        break;
-                    case "up":
-                        await page.evaluate(() => window.scrollBy({ top: -400, behavior: "smooth" }));
-                        break;
-                    case "down":
-                    default:
-                        await page.evaluate(() => window.scrollBy({ top: 400, behavior: "smooth" }));
-                        break;
+                const beforeY = await page.evaluate(() => window.scrollY);
+                if (humanInput && (direction === "down" || direction === "up")) {
+                    // Human-realistic scroll: variable delta + occasional glance-back.
+                    const { humanScroll } = await import("../visual/human-input.js");
+                    const baseDelta = direction === "down" ? 400 : -400;
+                    await humanScroll(page, baseDelta, inputTraits);
                 }
-                // Wait for scroll animation
-                await sleep(300);
-                return { success: true };
+                else {
+                    switch (direction) {
+                        case "top":
+                            await page.evaluate(() => window.scrollTo({ top: 0, behavior: "smooth" }));
+                            break;
+                        case "bottom":
+                            await page.evaluate(() => window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" }));
+                            break;
+                        case "up":
+                            await page.evaluate(() => window.scrollBy({ top: -400, behavior: "smooth" }));
+                            break;
+                        case "down":
+                        default:
+                            await page.evaluate(() => window.scrollBy({ top: 400, behavior: "smooth" }));
+                            break;
+                    }
+                    await sleep(300);
+                }
+                // Report success only if the page actually moved. A no-op scroll
+                // (already at top/bottom, or scroll blocked) returns failure so the
+                // AI knows to try something else instead of looping scroll:up/down.
+                const afterY = await page.evaluate(() => window.scrollY);
+                const moved = Math.abs(afterY - beforeY) > 5;
+                return { success: moved };
             }
             catch {
                 return { success: false };