@sveltium/mcp 0.1.0

package/src/client/dom/snapshot-builder.js

@@ -0,0 +1,229 @@
+'use strict'
+
+/**
+ * DOM Snapshot Builder
+ *
+ * Creates accessibility tree snapshot with element refs
+ */
+
+var ElementFinder = require('./element-finder')
+
+function SnapshotBuilder(win) {
+  this.win = win
+  this.doc = win.document
+  this.refCounter = 0
+  this.refMap = {}
+}
+
+SnapshotBuilder.prototype.build = function() {
+  this.refCounter = 0
+  this.refMap = {}
+
+  var lines = []
+  var title = this.doc.title || 'Untitled'
+  lines.push('- page "' + title + '" [ref=page]')
+
+  if (this.doc.body) {
+    this._buildNode(this.doc.body, 1, lines)
+  }
+
+  // Update global ref map for ElementFinder
+  ElementFinder.setRefMap(this.refMap)
+
+  return lines.join('\n')
+}
+
+SnapshotBuilder.prototype.getRefMap = function() {
+  return this.refMap
+}
+
+SnapshotBuilder.prototype._buildNode = function(node, depth, lines) {
+  if (node.nodeType !== 1) {
+    return
+  }
+
+  // Skip hidden elements
+  if (!this._isVisible(node)) {
+    return
+  }
+
+  // Skip script, style, etc.
+  var tagName = node.tagName.toLowerCase()
+  if (tagName === 'script' || tagName === 'style' || tagName === 'noscript') {
+    return
+  }
+
+  var role = this._getRole(node)
+  var name = this._getName(node)
+  var ref = 'e' + (++this.refCounter)
+
+  this.refMap[ref] = node
+
+  var indent = ''
+  for (var i = 0; i < depth; i++) {
+    indent += '  '
+  }
+
+  var line = indent + '- ' + role
+  if (name) {
+    line += ' "' + name + '"'
+  }
+
+  // Add attributes
+  var attrs = this._getAttributes(node)
+  if (attrs) {
+    line += ' ' + attrs
+  }
+
+  line += ' [ref=' + ref + ']'
+  lines.push(line)
+
+  // Process children
+  var children = node.children
+  for (var j = 0; j < children.length; j++) {
+    this._buildNode(children[j], depth + 1, lines)
+  }
+}
+
+SnapshotBuilder.prototype._isVisible = function(node) {
+  var style = this.win.getComputedStyle(node)
+  if (style.display === 'none' || style.visibility === 'hidden') {
+    return false
+  }
+  return true
+}
+
+SnapshotBuilder.prototype._getRole = function(node) {
+  var tagName = node.tagName.toLowerCase()
+  var role = node.getAttribute('role')
+
+  if (role) {
+    return role
+  }
+
+  var roleMap = {
+    'button': 'button',
+    'a': 'link',
+    'input': this._getInputRole(node),
+    'textarea': 'textbox',
+    'select': 'combobox',
+    'option': 'option',
+    'h1': 'heading',
+    'h2': 'heading',
+    'h3': 'heading',
+    'h4': 'heading',
+    'h5': 'heading',
+    'h6': 'heading',
+    'ul': 'list',
+    'ol': 'list',
+    'li': 'listitem',
+    'table': 'table',
+    'tr': 'row',
+    'td': 'cell',
+    'th': 'columnheader',
+    'img': 'image',
+    'nav': 'navigation',
+    'main': 'main',
+    'header': 'banner',
+    'footer': 'contentinfo',
+    'aside': 'complementary',
+    'form': 'form',
+    'section': 'region',
+    'article': 'article'
+  }
+
+  return roleMap[tagName] || 'generic'
+}
+
+SnapshotBuilder.prototype._getInputRole = function(node) {
+  var type = (node.getAttribute('type') || 'text').toLowerCase()
+
+  var typeRoleMap = {
+    'text': 'textbox',
+    'password': 'textbox',
+    'email': 'textbox',
+    'number': 'spinbutton',
+    'checkbox': 'checkbox',
+    'radio': 'radio',
+    'button': 'button',
+    'submit': 'button',
+    'reset': 'button',
+    'range': 'slider',
+    'search': 'searchbox'
+  }
+
+  return typeRoleMap[type] || 'textbox'
+}
+
+SnapshotBuilder.prototype._getName = function(node) {
+  // aria-label
+  var ariaLabel = node.getAttribute('aria-label')
+  if (ariaLabel) {
+    return ariaLabel
+  }
+
+  // For inputs, use label or placeholder
+  var tagName = node.tagName.toLowerCase()
+  if (tagName === 'input' || tagName === 'textarea' || tagName === 'select') {
+    var id = node.getAttribute('id')
+    if (id) {
+      var label = this.doc.querySelector('label[for="' + id + '"]')
+      if (label) {
+        return label.textContent.trim()
+      }
+    }
+    var placeholder = node.getAttribute('placeholder')
+    if (placeholder) {
+      return placeholder
+    }
+  }
+
+  // For buttons, links, headings - use text content
+  if (tagName === 'button' || tagName === 'a' || tagName.match(/^h[1-6]$/)) {
+    return node.textContent.trim().substring(0, 50)
+  }
+
+  // For images
+  if (tagName === 'img') {
+    return node.getAttribute('alt') || ''
+  }
+
+  // For list items with simple text
+  if (tagName === 'li') {
+    var text = node.textContent.trim()
+    if (text.length < 50 && node.children.length === 0) {
+      return text
+    }
+  }
+
+  return ''
+}
+
+SnapshotBuilder.prototype._getAttributes = function(node) {
+  var attrs = []
+  var tagName = node.tagName.toLowerCase()
+
+  if (tagName === 'input') {
+    var placeholder = node.getAttribute('placeholder')
+    if (placeholder) {
+      attrs.push('[placeholder="' + placeholder + '"]')
+    }
+    if (node.disabled) {
+      attrs.push('[disabled]')
+    }
+    if (node.checked) {
+      attrs.push('[checked]')
+    }
+  }
+
+  if (tagName === 'a') {
+    var href = node.getAttribute('href')
+    if (href && href.length < 50) {
+      attrs.push('[href="' + href + '"]')
+    }
+  }
+
+  return attrs.join(' ')
+}
+
+module.exports = SnapshotBuilder

package/src/client/index.js

@@ -0,0 +1,232 @@
+'use strict'
+
+/**
+ * NW.js MCP Client
+ *
+ * Include this in your NW.js app to enable MCP testing.
+ * The MCP server is started by Claude Code via .mcp.json configuration.
+ *
+ * Usage:
+ *   var mcp = require('@sveltium/nwjs-mcp')
+ *   mcp.init({
+ *     name: 'My App',
+ *     port: 3940
+ *   })
+ */
+
+var ToolExecutor = require('./tool-executor')
+
+var DEFAULT_PORT = 3940
+var RECONNECT_DELAY = 2000
+
+var _ws = null
+var _appId = null
+var _config = {}
+var _executor = null
+var _reconnectTimer = null
+var _connected = false
+var _win = null
+
+/**
+ * Initialize MCP client - connects to the MCP server
+ * @param {Object} options
+ * @param {string} options.name - App name (for identification)
+ * @param {string} options.appId - Unique app ID (auto-generated if not provided)
+ * @param {number} options.port - WebSocket port (default: 3940)
+ * @param {Window} options.window - Browser window reference (auto-detected if not provided)
+ * @param {boolean} options.autoReconnect - Auto-reconnect on disconnect (default: true)
+ * @param {boolean} options.enabled - Enable MCP (default: true, use false or --no-mcp to disable)
+ */
+function init(options) {
+  _config = options || {}
+  _config.port = _config.port || DEFAULT_PORT
+  _config.autoReconnect = _config.autoReconnect !== false
+  _config.enabled = _config.enabled !== false
+
+  // Check for --no-mcp flag to disable
+  var nwGui = _getNwGui()
+  if (nwGui && nwGui.App && nwGui.App.argv) {
+    var argv = nwGui.App.argv
+    for (var i = 0; i < argv.length; i++) {
+      if (argv[i] === '--no-mcp') {
+        _config.enabled = false
+        break
+      }
+    }
+  }
+
+  if (!_config.enabled) {
+    console.log('[nwjs-mcp] Disabled via config or --no-mcp flag')
+    return
+  }
+
+  // Get window reference
+  _win = _config.window || (typeof window !== 'undefined' ? window : null)
+  if (!_win) {
+    console.error('[nwjs-mcp] No window reference available. Pass { window: window } to init().')
+    return
+  }
+
+  // Initialize tool executor
+  _executor = new ToolExecutor(_win)
+
+  // Connect to server
+  _connect()
+}
+
+function _connect() {
+  var WS = _win.WebSocket
+  if (_ws && (_ws.readyState === WS.CONNECTING || _ws.readyState === WS.OPEN)) {
+    return
+  }
+
+  var url = 'ws://localhost:' + _config.port
+
+  try {
+    _ws = new WS(url)
+  } catch (e) {
+    console.error('[nwjs-mcp] Failed to create WebSocket:', e.message)
+    _scheduleReconnect()
+    return
+  }
+
+  _ws.onopen = function() {
+    console.log('[nwjs-mcp] Connected to MCP server')
+    _connected = true
+
+    // Register app
+    _ws.send(JSON.stringify({
+      type: 'register',
+      appId: _config.appId || _appId,
+      name: _config.name || ''
+    }))
+  }
+
+  _ws.onmessage = function(event) {
+    var message = null
+    try {
+      message = JSON.parse(event.data)
+    } catch (e) {
+      console.error('[nwjs-mcp] Invalid message:', e.message)
+      return
+    }
+
+    _handleMessage(message)
+  }
+
+  _ws.onclose = function() {
+    console.log('[nwjs-mcp] Disconnected from MCP server')
+    _connected = false
+    _ws = null
+    _scheduleReconnect()
+  }
+
+  _ws.onerror = function() {
+    // Error will be followed by close, reconnect handled there
+  }
+}
+
+function _scheduleReconnect() {
+  if (!_config.autoReconnect) {
+    return
+  }
+
+  if (_reconnectTimer) {
+    clearTimeout(_reconnectTimer)
+  }
+
+  _reconnectTimer = setTimeout(function() {
+    _reconnectTimer = null
+    console.log('[nwjs-mcp] Attempting to reconnect...')
+    _connect()
+  }, RECONNECT_DELAY)
+}
+
+function _handleMessage(message) {
+  if (message.type === 'registered') {
+    _appId = message.appId
+    console.log('[nwjs-mcp] Registered as:', _appId)
+    return
+  }
+
+  if (message.type === 'toolCall') {
+    _handleToolCall(message)
+    return
+  }
+}
+
+function _handleToolCall(message) {
+  var callId = message.callId
+  var tool = message.tool
+  var args = message.args
+
+  _executor.execute(tool, args, function(err, result) {
+    var WS = _win.WebSocket
+    if (_ws && _ws.readyState === WS.OPEN) {
+      if (err) {
+        _ws.send(JSON.stringify({
+          type: 'toolResult',
+          callId: callId,
+          error: err.message
+        }))
+      } else {
+        _ws.send(JSON.stringify({
+          type: 'toolResult',
+          callId: callId,
+          result: result
+        }))
+      }
+    }
+  })
+}
+
+function _getNwGui() {
+  try {
+    return require('nw.gui')
+  } catch (e) {
+    return typeof nw !== 'undefined' ? nw : null
+  }
+}
+
+/**
+ * Disconnect from the MCP server
+ */
+function disconnect() {
+  _config.autoReconnect = false
+
+  if (_reconnectTimer) {
+    clearTimeout(_reconnectTimer)
+    _reconnectTimer = null
+  }
+
+  if (_ws) {
+    _ws.close()
+    _ws = null
+  }
+
+  _connected = false
+}
+
+/**
+ * Check if connected
+ * @returns {boolean}
+ */
+function isConnected() {
+  return _connected
+}
+
+/**
+ * Get the app ID
+ * @returns {string|null}
+ */
+function getAppId() {
+  return _appId
+}
+
+module.exports = {
+  init: init,
+  connect: init,  // Alias for backwards compatibility
+  disconnect: disconnect,
+  isConnected: isConnected,
+  getAppId: getAppId
+}