inspect_mode

Instructions

Implementation Reference

• src/index.js:136-158 (handler)

  MCP tool handler for 'inspect_mode'. Receives an `enabled` boolean parameter and calls proxy.inspectOn() or proxy.inspectOff() to toggle inspect mode on the annotated page.

  // Tool 5: Toggle inspect mode
  mcp.tool(
    'inspect_mode',
    'Toggle inspect mode on the annotated page. When ON, the user can click any element to copy its name. When OFF, the page behaves normally. Use this to help the user copy element names for communicating design changes.',
    {
      enabled: z.boolean().describe('true to enable inspect mode, false to disable'),
    },
    async ({ enabled }) => {
      if (enabled) {
        proxy.inspectOn();
      } else {
        proxy.inspectOff();
      }
      return {
        content: [{
          type: 'text',
          text: enabled
            ? 'Inspect mode ON. The user can now click any element to copy its name. A toolbar indicator shows the mode is active.'
            : 'Inspect mode OFF. Page is back to normal interactive mode.',
        }],
      };
    }
  );

• src/proxy.js:179-185 (helper)

  Proxy methods inspectOn() and inspectOff() push commands ('inspect_on' / 'inspect_off') into the pendingCommand queue, which the browser polls.

      inspectOn: () => { pendingCommands.push({ type: 'inspect_on' }); },
      inspectOff: () => { pendingCommands.push({ type: 'inspect_off' }); },
      listen: (port) => new Promise((resolve) => {
        server.listen(port, () => resolve(port));
      }),
    };
  }

• src/annotator.js:35-41 (helper)

  Client-side polling handler that processes 'inspect_on' and 'inspect_off' commands received from the server, toggling the local inspect mode state.

          if (cmd.type === 'inspect_on') setInspectMode(true);
          if (cmd.type === 'inspect_off') setInspectMode(false);
        }
      })
      .catch(() => {})
      .finally(() => setTimeout(pollCommands, 1000));
  }

• src/annotator.js:185-206 (helper)

  Client-side setInspectMode() function that updates the UI: changes the toolbar button styling, cursor, overlay border, and subtitle text to indicate inspect mode is active/inactive.

  function setInspectMode(on) {
    inspectMode = on;
    if (on) {
      inspectBtn.style.background = '#e11d48';
      inspectBtn.style.color = '#fff';
      inspectBtn.style.borderColor = '#e11d48';
      inspectBtn.innerHTML = '<span style="font-size:14px;vertical-align:middle">🔍</span> Inspect ON';
      document.body.style.cursor = 'crosshair';
      overlay.style.borderColor = '#e11d48';
      subtitle.textContent = 'Click any element to copy its name to clipboard';
      subtitle.style.color = '#059669';
    } else {
      inspectBtn.style.background = 'transparent';
      inspectBtn.style.color = '#94a3b8';
      inspectBtn.style.borderColor = 'rgba(255,255,255,.15)';
      inspectBtn.innerHTML = '<span style="font-size:14px;vertical-align:middle">🔍</span> Inspect';
      document.body.style.cursor = '';
      overlay.style.borderColor = '#e11d48';
      subtitle.textContent = 'Enable to click any element and copy its name';
      subtitle.style.color = '#c8cdd5';
    }
  }

• src/annotator.js:317-340 (helper)

  Client-side click handler that, when inspectMode is true, intercepts clicks, prevents default, and copies the hovered element's name to the clipboard.

  document.addEventListener('click', (e) => {
    if (!inspectMode) return;
    if (e.target.closest('[data-ui-annotator]')) return;
  
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
  
    if (hoveredInfo) {
      navigator.clipboard.writeText(hoveredInfo.name).then(() => {
        showCopied(hoveredInfo.name);
      }).catch(() => {
        // Fallback for non-HTTPS
        const ta = document.createElement('textarea');
        ta.value = hoveredInfo.name;
        ta.style.cssText = 'position:fixed;opacity:0';
        document.body.appendChild(ta);
        ta.select();
        document.execCommand('copy');
        ta.remove();
        showCopied(hoveredInfo.name);
      });
    }
  }, true); // capture phase — intercept before page handlers