claude4arc 0.5.0

package/lib/paths.js

@@ -0,0 +1,10 @@
+import os from "node:os";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+export const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
+export const STATE_DIR = path.join(os.homedir(), ".arc-bridge");
+export const LOG_PATH = path.join(STATE_DIR, "host.log");
+export const TASKS_PATH = path.join(STATE_DIR, "tasks.json");
+export const HOST_NAME = "com.arcforclaude.bridge";
+export const EXTENSION_ID = "bfbcdjkeonepklbmjjghoddpahhhnimp";

package/lib/shim.js

@@ -0,0 +1,186 @@
+import { createHash } from "node:crypto";
+
+function agentShim(version) {
+  if (window.__arcShim?.version === version) return;
+  const state = { log: [], policy: null };
+  const opens = [];
+  const stubs = new Map();
+  const shim = {
+    version,
+    dialogs: state,
+    opens,
+    deliver(id, data, origin) {
+      const stub = stubs.get(id);
+      const event = new MessageEvent("message", { data, origin });
+      if (stub) Object.defineProperty(event, "source", { value: stub });
+      window.dispatchEvent(event);
+      return Boolean(stub);
+    },
+    closeStub(id) {
+      const stub = stubs.get(id);
+      if (stub) stub.closed = true;
+    },
+    setStubUrl(id, url) {
+      const entry = stubs.get(id)?.entry;
+      if (entry) entry.url = url;
+    },
+  };
+  Object.defineProperty(window, "__arcShim", { value: shim, configurable: true, writable: true });
+  const current = () => window.__arcShim === shim;
+  const events = [];
+  shim.events = events;
+  const note = (kind, detail) => {
+    events.push({ kind, detail: String(detail ?? "").slice(0, 160) });
+  };
+  const answer = (type, message, fallback) => {
+    const policy = state.policy;
+    state.policy = null;
+    const accepted = type === "alert" ? true : Boolean(policy?.accept);
+    state.log.push({ type, message: String(message ?? ""), accepted });
+    if (type === "confirm") return accepted;
+    if (type === "prompt") return accepted ? String(policy.text ?? fallback ?? "") : null;
+  };
+  window.alert = function alert(message) {
+    answer("alert", message);
+  };
+  window.confirm = function confirm(message) {
+    return answer("confirm", message);
+  };
+  window.prompt = function prompt(message, fallback) {
+    return answer("prompt", message, fallback);
+  };
+  const absolute = (url) => {
+    try {
+      return new URL(url, location.href).href;
+    } catch {
+      return String(url);
+    }
+  };
+  const namedFrameExists = (name) => {
+    const selector = `iframe[name="${CSS.escape(name)}"], frame[name="${CSS.escape(name)}"]`;
+    if (document.querySelector(selector)) return true;
+    try {
+      if (window.top.document.querySelector(selector)) return true;
+    } catch {}
+    let view = window;
+    try {
+      while (view) {
+        if (view.name === name) return true;
+        if (view === view.parent) break;
+        view = view.parent;
+      }
+    } catch {}
+    return false;
+  };
+  const opensWindow = (target) => {
+    const name = String(target || "");
+    const lower = name.toLowerCase();
+    if (!name || lower === "_self" || lower === "_parent" || lower === "_top") return false;
+    if (lower === "_blank") return true;
+    return !namedFrameExists(name);
+  };
+  const nativeOpen = window.open;
+  window.open = function open(url, target) {
+    if (!current() || (target && !opensWindow(target))) return nativeOpen.apply(window, arguments);
+    const entry = { kind: "window.open", url: url ? absolute(url) : "about:blank", id: `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 8)}` };
+    opens.push(entry);
+    const setUrl = (value) => {
+      entry.url = absolute(value);
+    };
+    const place = { assign: setUrl, replace: setUrl, reload() {} };
+    Object.defineProperty(place, "href", { get: () => entry.url, set: setUrl });
+    const stub = { closed: false, opener: window, entry, focus() {}, blur() {}, postMessage() {}, close() { stub.closed = true; } };
+    Object.defineProperty(stub, "location", { get: () => place, set: setUrl });
+    stubs.set(entry.id, stub);
+    return stub;
+  };
+  const retarget = (form, submitter) => {
+    if (!current()) return;
+    const target = submitter?.getAttribute?.("formtarget") || form.getAttribute("target");
+    if (!opensWindow(target)) return;
+    const url = new URL(absolute(form.getAttribute("action") || location.href));
+    if ((form.method || "get").toLowerCase() === "get") url.search = new URLSearchParams(new FormData(form, submitter ?? null)).toString();
+    opens.push({ kind: "form", url: url.href, method: (form.method || "get").toLowerCase() });
+    form.setAttribute("target", "_top");
+    if (submitter?.hasAttribute?.("formtarget")) submitter.setAttribute("formtarget", "_top");
+  };
+  addEventListener("submit", (event) => retarget(event.target, event.submitter), true);
+  const nativeSubmit = HTMLFormElement.prototype.submit;
+  HTMLFormElement.prototype.submit = function submit() {
+    retarget(this);
+    return nativeSubmit.call(this);
+  };
+  addEventListener("click", (event) => {
+    if (!current() || event.defaultPrevented || event.button !== 0) return;
+    if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+    const anchor = event.composedPath().find((node) => node instanceof Element && node.matches("a[href], area[href]"));
+    if (!anchor || !anchor.href || anchor.href.startsWith("javascript:")) return;
+    if (!/^(https?|blob|data|about):/i.test(anchor.href)) {
+      event.preventDefault();
+      note("external link", anchor.href);
+      return;
+    }
+    if (anchor.hasAttribute("download") || !opensWindow(anchor.getAttribute("target"))) return;
+    event.preventDefault();
+    opens.push({ kind: "link", url: anchor.href });
+  });
+  const clipboard = { text: "" };
+  shim.clipboard = clipboard;
+  const fakeClipboard = {
+    writeText: async (text) => {
+      clipboard.text = String(text);
+      note("clipboard", clipboard.text);
+    },
+    write: async () => {
+      note("clipboard", "(rich content)");
+    },
+    readText: async () => clipboard.text,
+    read: async () => [],
+  };
+  try {
+    Object.defineProperty(navigator, "clipboard", { value: fakeClipboard, configurable: true });
+  } catch {}
+  const nativeExec = document.execCommand.bind(document);
+  document.execCommand = function execCommand(command, ...rest) {
+    if (current() && /^(copy|cut)$/i.test(command)) {
+      clipboard.text = String(document.getSelection() ?? "");
+      note("clipboard", clipboard.text);
+      return true;
+    }
+    return nativeExec(command, ...rest);
+  };
+  window.print = function print() {
+    note("print dialog", location.href);
+  };
+  const blockFullscreen = function () {
+    note("fullscreen", this?.tagName ?? "document");
+    return Promise.resolve();
+  };
+  for (const name of ["requestFullscreen", "webkitRequestFullscreen", "webkitRequestFullScreen"]) {
+    if (Element.prototype[name]) Element.prototype[name] = blockFullscreen;
+  }
+  if (navigator.share) navigator.share = async (data) => note("share sheet", JSON.stringify(data ?? {}));
+  if (window.Notification) window.Notification.requestPermission = async () => {
+    note("permission", "notifications denied");
+    return "denied";
+  };
+  if (navigator.geolocation) {
+    const deny = (success, failure) => {
+      note("permission", "location denied");
+      failure?.({ code: 1, message: "User denied Geolocation", PERMISSION_DENIED: 1 });
+      return 0;
+    };
+    navigator.geolocation.getCurrentPosition = deny;
+    navigator.geolocation.watchPosition = deny;
+  }
+  if (navigator.mediaDevices?.getUserMedia) {
+    navigator.mediaDevices.getUserMedia = async () => {
+      note("permission", "camera/microphone denied");
+      throw new DOMException("Permission denied", "NotAllowedError");
+    };
+  }
+}
+
+const SHIM_SOURCE = agentShim.toString();
+
+export const AGENT_SHIM = `(${SHIM_SOURCE})(${JSON.stringify(createHash("sha1").update(SHIM_SOURCE).digest("hex").slice(0, 10))});`;

package/lib/task.js

@@ -0,0 +1,350 @@
+import fs from "node:fs/promises";
+import { blockedBy, blockedError, readBlocklist } from "./blocklist.js";
+import path from "node:path";
+import { createHash } from "node:crypto";
+import { Page } from "./page.js";
+import { normalizeUrl } from "./util.js";
+import { TASKS_PATH } from "./paths.js";
+
+async function loadState() {
+  try {
+    return JSON.parse(await fs.readFile(TASKS_PATH, "utf8"));
+  } catch {
+    return { nextId: 1, tasks: {} };
+  }
+}
+
+async function writeState(state) {
+  await fs.mkdir(path.dirname(TASKS_PATH), { recursive: true, mode: 0o700 });
+  const temp = `${TASKS_PATH}.${process.pid}.${Date.now()}.tmp`;
+  await fs.writeFile(temp, JSON.stringify(state, null, 2));
+  await fs.rename(temp, TASKS_PATH);
+}
+
+async function saveRecord(id, record) {
+  const state = await loadState();
+  if (record) state.tasks[String(id)] = record;
+  else delete state.tasks[String(id)];
+  state.nextId = Math.max(state.nextId, Number(id) + 1);
+  await writeState(state);
+}
+
+async function allocateId() {
+  const directory = path.join(path.dirname(TASKS_PATH), "task-ids");
+  await fs.mkdir(directory, { recursive: true, mode: 0o700 });
+  const state = await loadState();
+  const used = new Set(await fs.readdir(directory));
+  let id = state.nextId;
+  while (true) {
+    if (!used.has(String(id))) {
+      try {
+        await fs.writeFile(path.join(directory, String(id)), "", { flag: "wx" });
+        return id;
+      } catch (error) {
+        if (error.code !== "EEXIST") throw error;
+      }
+    }
+    id++;
+  }
+}
+
+const OWNER_SOURCE = process.env.CLAUDE_JOB_DIR ?? process.env.CLAUDE_CODE_MESSAGING_SOCKET ?? null;
+const OWNER = OWNER_SOURCE ? createHash("sha1").update(OWNER_SOURCE).digest("hex").slice(0, 12) : null;
+
+function summarizeTab(tab) {
+  return {
+    tabId: tab.id,
+    windowId: tab.windowId,
+    title: tab.title,
+    url: tab.url,
+    active: tab.active,
+    pinned: tab.pinned,
+  };
+}
+
+export async function browserOfTask(id) {
+  const state = await loadState();
+  return state.tasks[String(id)]?.browser ?? null;
+}
+
+export class Task {
+  static async open(bridge, nameOrId, { active = false, url } = {}) {
+    const state = await loadState();
+    if (typeof nameOrId === "number" || /^\d+$/.test(String(nameOrId))) {
+      const record = state.tasks[String(nameOrId)];
+      if (!record) throw new Error(`Task ${nameOrId} does not exist. Use the id printed by \`claude4arc new\`, or run \`claude4arc status\`.`);
+      if (record.owner && OWNER && record.owner !== OWNER && !process.env.CLAUDE4ARC_ANY_TASK && !process.env.ARC_BROWSER_ANY_TASK) {
+        throw new Error(`Task ${nameOrId} belongs to another Claude session. Use the id printed by your own \`claude4arc new\`.`);
+      }
+      if (record.browser && bridge.browser && record.browser !== bridge.browser) {
+        throw new Error(`Task ${nameOrId} runs in ${record.browser}, but this command is connected to ${bridge.browser}.`);
+      }
+      const task = new Task(bridge, state, record);
+      await task.#prune();
+      return task;
+    }
+    const record = {
+      id: await allocateId(),
+      name: String(nameOrId ?? "task"),
+      createdAt: new Date().toISOString(),
+      owner: OWNER,
+      browser: bridge.browser,
+      nextLabel: 1,
+      pages: {},
+    };
+    state.tasks[String(record.id)] = record;
+    const task = new Task(bridge, state, record);
+    await task.newPage({ active, url });
+    return task;
+  }
+
+  #state;
+  #record;
+  #pages = new Map();
+  #popupWatchers = new Set();
+  #finished = false;
+  #saving = Promise.resolve();
+
+  constructor(bridge, state, record) {
+    this.bridge = bridge;
+    this.#state = state;
+    this.#record = record;
+    bridge.on((message) => this.#dispatch(message));
+  }
+
+  get spaceId() {
+    return this.#record.id;
+  }
+
+  get name() {
+    return this.#record.name;
+  }
+
+  #dispatch(message) {
+    if (message.type === "tabCreated") {
+      for (const watcher of this.#popupWatchers) watcher(message.tab);
+      return;
+    }
+    if (message.type === "tabRemoved") {
+      const label = this.#labelForTab(message.tabId);
+      if (label) this._forget(label);
+      return;
+    }
+    const page = this.#pageForTab(message.tabId);
+    page?._onEvent(message);
+  }
+
+  #labelForTab(tabId) {
+    return Object.entries(this.#record.pages).find(([, entry]) => entry.tabId === tabId)?.[0];
+  }
+
+  #pageForTab(tabId) {
+    const label = this.#labelForTab(tabId);
+    return label ? this.page(label) : null;
+  }
+
+  #save() {
+    this.#saving = this.#saving
+      .catch(() => {})
+      .then(() => {
+        if (this.#finished) return;
+        return saveRecord(this.#record.id, this.#record);
+      });
+    return this.#saving;
+  }
+
+  async #prune() {
+    const tabs = await this.bridge.call("tabs.query", {});
+    const alive = new Set(tabs.map((tab) => tab.id));
+    let changed = false;
+    for (const [label, entry] of Object.entries(this.#record.pages)) {
+      if (!alive.has(entry.tabId)) {
+        delete this.#record.pages[label];
+        changed = true;
+      }
+    }
+    if (changed) await this.#save();
+  }
+
+  async #register(tab, openedBy, as) {
+    const label = as ?? `p${this.#record.nextLabel++}`;
+    if (this.#record.pages[label]) throw new Error(`Label ${label} is already in use.`);
+    this.#record.pages[label] = { tabId: tab.id, openedBy };
+    this.#record.current = label;
+    await this.#save();
+    return this.page(label);
+  }
+
+  get current() {
+    return this.#record.pages[this.#record.current] ? this.#record.current : Object.keys(this.#record.pages).at(-1) ?? null;
+  }
+
+  async use(label) {
+    this.page(label);
+    if (this.#record.current !== label) {
+      this.#record.current = label;
+      await this.#save();
+    }
+    return this.page(label);
+  }
+
+  page(label = this.current) {
+    const entry = this.#record.pages[label];
+    if (!entry) {
+      const known = Object.keys(this.#record.pages).join(", ") || "none";
+      throw new Error(`Task ${this.spaceId} has no page ${label}. Known pages: ${known}.`);
+    }
+    let page = this.#pages.get(label);
+    if (!page || page.tabId !== entry.tabId) {
+      page = new Page(this, label, entry.tabId, entry.openedBy);
+      this.#pages.set(label, page);
+    }
+    return page;
+  }
+
+  async pages() {
+    await this.#prune();
+    return Object.keys(this.#record.pages).map((label) => this.page(label));
+  }
+
+  async tabs() {
+    const tabs = await this.bridge.call("tabs.query", {});
+    return tabs.map((tab) => {
+      const label = this.#labelForTab(tab.id);
+      return {
+        label: label ?? null,
+        openedBy: label ? this.#record.pages[label].openedBy : "unknown",
+        ...summarizeTab(tab),
+      };
+    });
+  }
+
+  async userTab() {
+    const [tab] = await this.bridge.call("tabs.query", { active: true, lastFocusedWindow: true });
+    if (!tab) return null;
+    const label = this.#labelForTab(tab.id);
+    return { label: label ?? null, ...summarizeTab(tab) };
+  }
+
+  async newPage({ url, active = false, timeout = 30_000, opener = null } = {}) {
+    const pattern = url ? blockedBy(normalizeUrl(url), readBlocklist()) : null;
+    if (pattern) throw blockedError(normalizeUrl(url), pattern);
+    if (opener && url) {
+      const tab = await this.bridge.call("tabs.create", { url: "about:blank", active });
+      await this.bridge.call("guard.enable", tab.id).catch(() => {});
+      this.bridge.call("tabs.update", tab.id, { muted: true }).catch(() => {});
+      const page = await this.#register(tab, "agent");
+      await this.bridge.call("host.linkPopup", tab.id, opener);
+      await page.goto(url, { waitUntil: "commit", timeout }).catch(() => {});
+      await page._waitForTabLoad(Math.min(timeout, 10_000)).catch(() => {});
+      return page;
+    }
+    const tab = await this.bridge.call("tabs.create", { url: url ? normalizeUrl(url) : "about:blank", active });
+    this.bridge.call("guard.enable", tab.id).catch(() => {});
+    this.bridge.call("tabs.update", tab.id, { muted: true }).catch(() => {});
+    const page = await this.#register(tab, "agent");
+    if (url && url !== "about:blank") {
+      await page._waitForTabLoad(timeout);
+      await page.settle({ quiet: 100, max: 1_000 }).catch(() => {});
+    }
+    return page;
+  }
+
+  async adopt(target, { as } = {}) {
+    const tabId = typeof target === "number" ? target : target?.tabId ?? target?.id;
+    if (typeof tabId !== "number") throw new Error("adopt() needs a tab id or a tab object from tabs() or userTab().");
+    const existing = this.#labelForTab(tabId);
+    if (existing) return this.page(existing);
+    const tab = await this.bridge.call("tabs.get", tabId);
+    const pattern = blockedBy(tab.url, readBlocklist());
+    if (pattern) throw blockedError(tab.url, pattern);
+    return this.#register(tab, "user", as);
+  }
+
+  async release(label) {
+    const page = this.page(label);
+    await page._detach();
+    this._forget(label);
+    await this.#save();
+  }
+
+  _forget(label) {
+    delete this.#record.pages[label];
+    this.#pages.delete(label);
+    this.#save().catch(() => {});
+  }
+
+  _watchPopups(opener, onPopup) {
+    const watcher = async (tab) => {
+      if (tab.openerTabId !== opener.tabId) return;
+      const page = await this.#register(tab, "agent");
+      onPopup(page);
+    };
+    this.#popupWatchers.add(watcher);
+    return () => this.#popupWatchers.delete(watcher);
+  }
+
+  _waitForPopup(opener, timeout) {
+    return new Promise((resolve, reject) => {
+      const stop = this._watchPopups(opener, (page) => {
+        clearTimeout(timer);
+        stop();
+        resolve(page);
+      });
+      const timer = setTimeout(() => {
+        stop();
+        reject(new Error(`No popup from page ${opener.label} within ${timeout}ms`));
+      }, timeout);
+    });
+  }
+
+  async finish({ keep = [] } = {}) {
+    const kept = [];
+    const closed = [];
+    const released = [];
+    const work = [];
+    for (const [label, entry] of Object.entries({ ...this.#record.pages })) {
+      if (keep.includes(label)) {
+        kept.push(label);
+        work.push(this.page(label)._detach());
+      } else if (entry.openedBy === "agent") {
+        closed.push(label);
+        work.push(this.bridge.call("tabs.remove", entry.tabId).catch(() => {}));
+      } else {
+        released.push(label);
+        work.push(this.page(label)._detach());
+      }
+    }
+    await Promise.all(work);
+    this.#finished = true;
+    await this.#saving.catch(() => {});
+    await saveRecord(this.#record.id, null);
+    this.#record.pages = {};
+    return { spaceId: this.spaceId, closed, kept, released };
+  }
+
+  async _settleDialogs() {
+    const notes = [];
+    for (const page of this.#pages.values()) {
+      const dialog = page.dialog;
+      if (!dialog) continue;
+      await page.dismissDialog().catch(() => {});
+      notes.push(`${page.label}: ${dialog.type} "${dialog.message}" was dismissed. Chain "-- accept [text]" after the action to accept it.`);
+    }
+    return notes;
+  }
+
+  toJSON() {
+    return { spaceId: this.spaceId, name: this.name, pages: Object.keys(this.#record.pages) };
+  }
+}
+
+export async function listTasks() {
+  const state = await loadState();
+  return Object.values(state.tasks).map((record) => ({
+    spaceId: record.id,
+    name: record.name,
+    createdAt: record.createdAt,
+    pages: Object.fromEntries(Object.entries(record.pages).map(([label, entry]) => [label, entry.tabId])),
+  }));
+}

package/lib/util.js

@@ -0,0 +1,64 @@
+import { execFile } from "node:child_process";
+import { promisify } from "node:util";
+
+export const run = promisify(execFile);
+export const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+export const TRANSIENT =
+  /Execution context was destroyed|Cannot find default execution context|Inspected target navigated|Cannot find context with specified id|No frame with given id|Target closed|Debugger is not attached/i;
+
+export function withTimeout(promise, ms, message) {
+  let timer;
+  return Promise.race([
+    promise,
+    new Promise((_, reject) => {
+      timer = setTimeout(() => reject(new Error(message)), ms);
+    }),
+  ]).finally(() => clearTimeout(timer));
+}
+
+export async function poll(check, { timeout, interval = 50, message }) {
+  const deadline = Date.now() + timeout;
+  let lastError = null;
+  while (true) {
+    try {
+      const value = await check();
+      if (value) return value;
+      lastError = null;
+    } catch (error) {
+      if (error.fatal) throw error;
+      lastError = error;
+    }
+    if (Date.now() >= deadline) {
+      throw new Error(lastError && !TRANSIENT.test(lastError.message) ? `${message}: ${lastError.message}` : message);
+    }
+    await sleep(interval);
+  }
+}
+
+export function fatal(error) {
+  error.fatal = true;
+  return error;
+}
+
+export function normalizeUrl(url) {
+  if (/^(localhost|\d+\.\d+\.\d+\.\d+|\[[0-9a-f:]+\])(:\d+)?(\/|$)/i.test(url)) return `http://${url}`;
+  if (/^[a-z][a-z0-9+.-]*:(?!\d)/i.test(url)) return url;
+  return `https://${url}`;
+}
+
+export function urlMatches(url, matcher) {
+  if (matcher instanceof RegExp) return matcher.test(url);
+  if (typeof matcher === "function") return Boolean(matcher(url));
+  if (matcher.includes("*")) {
+    const pattern = matcher.split("*").map((part) => part.replace(/[.+?^${}()|[\]\\]/g, "\\$&")).join(".*");
+    return new RegExp(`^${pattern}$`).test(url);
+  }
+  return url === matcher || url.includes(matcher);
+}
+
+export function pbcopy(text) {
+  return new Promise((resolve, reject) => {
+    const child = execFile("pbcopy", (error) => (error ? reject(error) : resolve()));
+    child.stdin.end(text);
+  });
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "claude4arc",
+  "version": "0.5.0",
+  "description": "Let Claude Code drive your real Arc browser through a local extension bridge.",
+  "type": "module",
+  "bin": {
+    "claude4arc": "bin/claude4arc.js"
+  },
+  "scripts": {
+    "test": "node --test \"tests/unit/*.test.js\"",
+    "test:e2e": "node tests/run.js",
+    "check": "for f in bin/*.js lib/*.js host/*.js extension/*.js tests/*.js tests/unit/*.js bench/*.js scripts/*.js; do node --check \"$f\" || exit 1; done",
+    "package:extension": "node scripts/package-extension.js"
+  },
+  "files": [
+    "bin",
+    "lib",
+    "host",
+    "extension",
+    "skill"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "os": [
+    "darwin"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nesetkab/claude4arc.git"
+  },
+  "homepage": "https://github.com/nesetkab/claude4arc#readme",
+  "keywords": [
+    "claude",
+    "claude-code",
+    "arc",
+    "browser",
+    "automation",
+    "cdp",
+    "skill"
+  ],
+  "license": "MIT"
+}