tab-agent 0.2.0

package/extension/snapshot.js

@@ -0,0 +1,194 @@
+// snapshot.js
+// Builds AI-readable snapshots from the DOM accessibility tree
+
+(function() {
+  let refCounter = 0;
+  const refMap = new Map();
+
+  function resetRefs() {
+    refCounter = 0;
+    refMap.clear();
+  }
+
+  function nextRef() {
+    return `e${++refCounter}`;
+  }
+
+  function storeRef(ref, element) {
+    refMap.set(ref, element);
+  }
+
+  window.__tabAgent_getElementByRef = function(ref) {
+    return refMap.get(ref);
+  };
+
+  function getRole(element) {
+    if (element.getAttribute('role')) {
+      return element.getAttribute('role');
+    }
+
+    const tag = element.tagName.toLowerCase();
+    const type = element.getAttribute('type');
+
+    const roleMap = {
+      'a': 'link',
+      'button': 'button',
+      'input': type === 'submit' ? 'button' :
+               type === 'checkbox' ? 'checkbox' :
+               type === 'radio' ? 'radio' :
+               type === 'text' || type === 'email' || type === 'password' || type === 'search' ? 'textbox' :
+               'input',
+      'textarea': 'textbox',
+      'select': 'combobox',
+      'img': 'img',
+      'h1': 'heading',
+      'h2': 'heading',
+      'h3': 'heading',
+      'h4': 'heading',
+      'h5': 'heading',
+      'h6': 'heading',
+      'nav': 'navigation',
+      'main': 'main',
+      'footer': 'contentinfo',
+      'header': 'banner',
+      'form': 'form',
+      'table': 'table',
+      'ul': 'list',
+      'ol': 'list',
+      'li': 'listitem',
+    };
+
+    return roleMap[tag] || 'generic';
+  }
+
+  function getName(element) {
+    if (element.getAttribute('aria-label')) {
+      return element.getAttribute('aria-label');
+    }
+
+    if (element.getAttribute('aria-labelledby')) {
+      const labelId = element.getAttribute('aria-labelledby');
+      const labelEl = document.getElementById(labelId);
+      if (labelEl) return labelEl.textContent.trim();
+    }
+
+    if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA' || element.tagName === 'SELECT') {
+      const id = element.id;
+      if (id) {
+        const label = document.querySelector(`label[for="${id}"]`);
+        if (label) return label.textContent.trim();
+      }
+      if (element.placeholder) return element.placeholder;
+    }
+
+    if (element.tagName === 'IMG') {
+      return element.alt || '';
+    }
+
+    if (element.tagName === 'BUTTON' || element.tagName === 'A') {
+      return element.textContent.trim().substring(0, 100);
+    }
+
+    if (/^H[1-6]$/.test(element.tagName)) {
+      return element.textContent.trim().substring(0, 100);
+    }
+
+    if (element.title) {
+      return element.title;
+    }
+
+    return '';
+  }
+
+  function isInteractive(element) {
+    const tag = element.tagName.toLowerCase();
+    const interactiveTags = ['a', 'button', 'input', 'textarea', 'select', 'details', 'summary'];
+
+    if (interactiveTags.includes(tag)) return true;
+    if (element.getAttribute('onclick')) return true;
+    if (element.getAttribute('role') === 'button') return true;
+    if (element.getAttribute('tabindex') !== null) return true;
+    if (element.contentEditable === 'true') return true;
+
+    return false;
+  }
+
+  function isVisible(element) {
+    const style = window.getComputedStyle(element);
+    if (style.display === 'none') return false;
+    if (style.visibility === 'hidden') return false;
+    if (style.opacity === '0') return false;
+
+    const rect = element.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0) return false;
+
+    return true;
+  }
+
+  function buildSnapshot(element, depth = 0, maxDepth = 10) {
+    if (depth > maxDepth) return [];
+    if (!isVisible(element)) return [];
+
+    const lines = [];
+    const role = getRole(element);
+    const name = getName(element);
+    const interactive = isInteractive(element);
+
+    const includedRoles = [
+      'link', 'button', 'textbox', 'checkbox', 'radio', 'combobox',
+      'heading', 'img', 'navigation', 'main', 'form', 'listitem',
+      'tab', 'tabpanel', 'menu', 'menuitem', 'dialog', 'alert'
+    ];
+
+    const shouldInclude = includedRoles.includes(role) || interactive;
+
+    if (shouldInclude && (name || interactive)) {
+      const ref = nextRef();
+      storeRef(ref, element);
+
+      let line = `[${ref}] ${role}`;
+      if (name) {
+        line += ` "${name.substring(0, 80)}"`;
+      }
+
+      if (element.tagName === 'INPUT') {
+        const type = element.type;
+        if (type === 'checkbox' || type === 'radio') {
+          line += element.checked ? ' (checked)' : ' (unchecked)';
+        }
+        if (element.value && type !== 'password') {
+          line += ` value="${element.value.substring(0, 30)}"`;
+        }
+      }
+
+      if (element.tagName === 'SELECT') {
+        const selected = element.options[element.selectedIndex];
+        if (selected) {
+          line += ` selected="${selected.text}"`;
+        }
+      }
+
+      lines.push(line);
+    }
+
+    for (const child of element.children) {
+      lines.push(...buildSnapshot(child, depth + 1, maxDepth));
+    }
+
+    return lines;
+  }
+
+  window.__tabAgent_snapshot = function() {
+    resetRefs();
+
+    const lines = ['== Page Snapshot ==', `URL: ${window.location.href}`, `Title: ${document.title}`, ''];
+    lines.push(...buildSnapshot(document.body));
+
+    return {
+      url: window.location.href,
+      title: document.title,
+      snapshot: lines.join('\n'),
+      refCount: refCounter,
+    };
+  };
+})();

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "tab-agent",
+  "version": "0.2.0",
+  "description": "Browser control for Claude Code and Codex via WebSocket",
+  "bin": {
+    "tab-agent": "./bin/tab-agent.js"
+  },
+  "main": "relay/server.js",
+  "scripts": {
+    "start": "node relay/server.js"
+  },
+  "files": [
+    "bin/",
+    "cli/",
+    "relay/",
+    "skills/",
+    "extension/"
+  ],
+  "dependencies": {
+    "ws": "^8.16.0"
+  },
+  "keywords": ["chrome", "extension", "browser", "automation", "claude", "codex"],
+  "repository": "https://github.com/DrHB/tab-agent",
+  "license": "MIT"
+}

package/relay/install-native-host.sh

@@ -0,0 +1,57 @@
+#!/bin/bash
+set -e
+
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+HOST_NAME="com.tabagent.relay"
+HOST_DIR="$HOME/Library/Application Support/TabAgent"
+WRAPPER_PATH="$HOST_DIR/native-host-wrapper.sh"
+
+if [[ "$OSTYPE" == "darwin"* ]]; then
+  MANIFEST_DIR="$HOME/Library/Application Support/Google/Chrome/NativeMessagingHosts"
+elif [[ "$OSTYPE" == "linux-gnu"* ]]; then
+  MANIFEST_DIR="$HOME/.config/google-chrome/NativeMessagingHosts"
+else
+  echo "Unsupported OS: $OSTYPE"
+  exit 1
+fi
+
+mkdir -p "$MANIFEST_DIR"
+
+if [ -z "$1" ]; then
+  echo "Usage: ./install-native-host.sh <extension-id>"
+  echo ""
+  echo "Find your extension ID at chrome://extensions (enable Developer mode)"
+  exit 1
+fi
+
+EXTENSION_ID="$1"
+
+if [ ! -d "$SCRIPT_DIR/node_modules/ws" ]; then
+  echo "Dependencies missing: run 'npm install' in $SCRIPT_DIR first."
+  exit 1
+fi
+
+mkdir -p "$HOST_DIR"
+rm -rf "$HOST_DIR/node_modules"
+cp "$SCRIPT_DIR/native-host.js" "$HOST_DIR/native-host.js"
+cp "$SCRIPT_DIR/native-host-wrapper.sh" "$HOST_DIR/native-host-wrapper.sh"
+cp -R "$SCRIPT_DIR/node_modules" "$HOST_DIR/node_modules"
+
+cat > "$MANIFEST_DIR/$HOST_NAME.json" << EOF
+{
+  "name": "$HOST_NAME",
+  "description": "Tab Agent Native Messaging Host",
+  "path": "$WRAPPER_PATH",
+  "type": "stdio",
+  "allowed_origins": [
+    "chrome-extension://$EXTENSION_ID/"
+  ]
+}
+EOF
+
+chmod +x "$WRAPPER_PATH"
+chmod +x "$HOST_DIR/native-host.js"
+
+echo "Native messaging host installed!"
+echo "Manifest: $MANIFEST_DIR/$HOST_NAME.json"
+echo "Extension ID: $EXTENSION_ID"

package/relay/native-host-wrapper.cmd

@@ -0,0 +1,3 @@
+@echo off
+cd /d "%~dp0"
+node native-host.js

package/relay/native-host-wrapper.sh

@@ -0,0 +1,29 @@
+#!/bin/bash
+# Wrapper script to ensure correct working directory for native-host.js
+
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+cd "$SCRIPT_DIR"
+
+LOG_FILE="$SCRIPT_DIR/wrapper.log"
+echo "$(date): Starting native host from $SCRIPT_DIR" >> "$LOG_FILE"
+export TAB_AGENT_LOG="/tmp/tab-agent-native-host.log"
+
+NODE_BIN="/opt/homebrew/bin/node"
+if [ ! -x "$NODE_BIN" ]; then
+  NODE_BIN="/usr/local/bin/node"
+fi
+if [ ! -x "$NODE_BIN" ]; then
+  NODE_BIN="/usr/bin/node"
+fi
+if [ ! -x "$NODE_BIN" ]; then
+  NODE_BIN="$(command -v node 2>/dev/null)"
+fi
+if [ -z "$NODE_BIN" ] || [ ! -x "$NODE_BIN" ]; then
+  echo "$(date): Node.js not found" >> "$LOG_FILE"
+  exit 1
+fi
+
+export NODE_PATH="$SCRIPT_DIR/node_modules"
+echo "$(date): Using node at $NODE_BIN" >> "$LOG_FILE"
+echo "$(date): TAB_AGENT_LOG=$TAB_AGENT_LOG" >> "$LOG_FILE"
+exec "$NODE_BIN" "$SCRIPT_DIR/native-host.js" 2>> "$LOG_FILE"

package/relay/native-host.js

@@ -0,0 +1,128 @@
+#!/usr/bin/env node
+// native-host.js
+const WebSocket = require('ws');
+const fs = require('fs');
+
+const LOG_PATH = process.env.TAB_AGENT_LOG || '';
+
+function log(msg) {
+  if (!LOG_PATH) return;
+  try {
+    fs.appendFileSync(LOG_PATH, `${new Date().toISOString()} ${msg}\n`);
+  } catch (error) {
+    // Logging must never crash the host.
+  }
+}
+
+function sendMessage(message) {
+  const json = JSON.stringify(message);
+  const length = Buffer.alloc(4);
+  length.writeUInt32LE(json.length, 0);
+  process.stdout.write(length);
+  process.stdout.write(json);
+}
+
+let inputBuffer = Buffer.alloc(0);
+let ws = null;
+let reconnectTimer = null;
+let lastErrorAt = 0;
+
+process.stdin.on('data', (chunk) => {
+  inputBuffer = Buffer.concat([inputBuffer, chunk]);
+
+  while (inputBuffer.length >= 4) {
+    const length = inputBuffer.readUInt32LE(0);
+    if (inputBuffer.length < 4 + length) break;
+
+    let message = null;
+    try {
+      message = JSON.parse(inputBuffer.slice(4, 4 + length).toString());
+    } catch (error) {
+      sendMessage({ type: 'error', error: `Invalid message: ${error.message}` });
+    }
+    inputBuffer = inputBuffer.slice(4 + length);
+
+    if (message) {
+      handleMessage(message);
+    }
+  }
+});
+
+process.stdin.on('end', () => {
+  log('stdin ended - extension disconnected');
+  if (ws) {
+    try {
+      ws.close();
+    } catch (error) {
+      // Ignore shutdown errors.
+    }
+  }
+  process.exit(0);
+});
+
+process.stdin.on('error', (err) => {
+  log(`stdin error: ${err.message}`);
+});
+
+function scheduleReconnect() {
+  if (reconnectTimer) return;
+  reconnectTimer = setTimeout(() => {
+    reconnectTimer = null;
+    connectWebSocket();
+  }, 1000);
+}
+
+function connectWebSocket() {
+  try {
+    ws = new WebSocket('ws://localhost:9876', {
+      headers: { 'x-client-type': 'extension' }
+    });
+  } catch (error) {
+    const now = Date.now();
+    if (now - lastErrorAt > 2000) {
+      lastErrorAt = now;
+      sendMessage({ type: 'error', error: error.message });
+    }
+    scheduleReconnect();
+    return;
+  }
+
+  ws.on('open', () => {
+    sendMessage({ type: 'connected' });
+  });
+
+  ws.on('message', (data) => {
+    let message = null;
+    try {
+      message = JSON.parse(data);
+    } catch (error) {
+      sendMessage({ type: 'error', error: `Invalid relay message: ${error.message}` });
+      return;
+    }
+    sendMessage({ type: 'command', ...message });
+  });
+
+  ws.on('error', (error) => {
+    const now = Date.now();
+    if (now - lastErrorAt > 2000) {
+      lastErrorAt = now;
+      sendMessage({ type: 'error', error: error.message });
+    }
+  });
+
+  ws.on('close', () => {
+    scheduleReconnect();
+  });
+}
+
+function handleMessage(message) {
+  if (message.type === 'response') {
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify(message));
+    } else {
+      sendMessage({ type: 'error', error: 'Relay not connected' });
+    }
+  }
+}
+
+connectWebSocket();

package/relay/node_modules/.package-lock.json

@@ -0,0 +1,29 @@
+{
+  "name": "tab-agent-relay",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "node_modules/ws": {
+      "version": "8.19.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz",
+      "integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    }
+  }
+}

package/relay/node_modules/ws/LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2011 Einar Otto Stangvik <einaros@gmail.com>
+Copyright (c) 2013 Arnout Kazemier and contributors
+Copyright (c) 2016 Luigi Pinca and contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.