copilot-tap-extension 2.0.8 → 2.0.9

package/providers/detour/src/bridge.js

@@ -0,0 +1,256 @@
+import { MESSAGE_TYPES } from "./contracts.js";
+
+/**
+ * Detour ↔ Agent Bridge (v2)
+ *
+ * Injected by the Detour Chrome extension via "Inject on load" rules.
+ * Single bundled file that includes:
+ *   - WebSocket connection to provider
+ *   - Console log capture
+ *   - Remote JS eval from agent
+ *   - Context panel (element picker, annotations, chat, detail chooser)
+ *   - React component extraction (best-effort via bippy)
+ */
+
+var _createPanel = null;
+try {
+  var panelModule = require("./panel.js");
+  _createPanel = panelModule.createPanel;
+} catch (e) {
+  // Panel module failed to load — core bridge still works
+  if (typeof console !== "undefined") console.warn("[Detour] Panel module failed to load:", e.message);
+}
+
+(function () {
+  "use strict";
+  if (window.__detourBridge) return;
+
+  var WS_URL = "__DET0UR_WS_URL__";
+  var RECONNECT_MS = 3000;
+  var ws = null;
+
+  var bridgeAPI = {
+    connected: false,
+    send: null,
+    ask: null,
+    sendMessage: sendMessage,
+  };
+  window.__detourBridge = bridgeAPI;
+
+  // ── Console intercept ─────────────────────────────────────────────────
+  var orig = {};
+  ["log", "warn", "error", "info", "debug"].forEach(function (level) {
+    orig[level] = console[level].bind(console);
+    console[level] = function () {
+      var args = Array.prototype.slice.call(arguments);
+      orig[level].apply(console, args);
+      sendConsole(level, args);
+    };
+  });
+
+  window.addEventListener("error", function (e) {
+    sendConsole("error", ["Uncaught: " + e.message + " at " + e.filename + ":" + e.lineno + ":" + e.colno]);
+  });
+
+  window.addEventListener("unhandledrejection", function (e) {
+    sendConsole("error", ["Unhandled rejection: " + e.reason]);
+  });
+
+  function sendConsole(level, args) {
+    if (!ws || ws.readyState !== WebSocket.OPEN) return;
+    var serialized = args.map(function (a) {
+      try {
+        if (typeof a === "string") return a;
+        if (a instanceof Error) return a.name + ": " + a.message;
+        if (a instanceof HTMLElement) return a.outerHTML.slice(0, 200);
+        return JSON.stringify(a);
+      } catch (e) { return String(a); }
+    });
+    try {
+      ws.send(JSON.stringify({
+        type: MESSAGE_TYPES.CONSOLE,
+        level: level,
+        args: serialized,
+        timestamp: new Date().toISOString(),
+      }));
+    } catch (e) { /* ignore */ }
+  }
+
+  // ── Serializer ────────────────────────────────────────────────────────
+  function serialize(value) {
+    if (value === undefined) return "undefined";
+    if (value === null) return "null";
+    if (value instanceof HTMLElement) return value.outerHTML.slice(0, 5000);
+    if (typeof value === "object") {
+      try { return JSON.stringify(value, null, 2); }
+      catch (e) { return String(value); }
+    }
+    return String(value);
+  }
+
+  // ── Eval handler ──────────────────────────────────────────────────────
+  function handleEval(msg) {
+    var result = { type: MESSAGE_TYPES.EVAL_RESULT, id: msg.id };
+    try {
+      var value = (0, eval)(msg.code);
+      if (value && typeof value.then === "function") {
+        value.then(
+          function (resolved) { result.value = serialize(resolved); ws.send(JSON.stringify(result)); },
+          function (rejected) { result.error = String(rejected); ws.send(JSON.stringify(result)); }
+        );
+      } else {
+        result.value = serialize(value);
+        ws.send(JSON.stringify(result));
+      }
+    } catch (err) {
+      result.error = err.name + ": " + err.message;
+      ws.send(JSON.stringify(result));
+    }
+  }
+
+  // ── Messaging ─────────────────────────────────────────────────────────
+  function sendMessage(type, data) {
+    if (!ws || ws.readyState !== WebSocket.OPEN) {
+      orig.warn("[Detour] Not connected — message not sent");
+      return false;
+    }
+    try {
+      var payload = JSON.stringify({ type: type, ...data });
+      ws.send(payload);
+      orig.log("[Detour] Sent:", type, "(" + payload.length + " bytes)");
+      return true;
+    } catch (e) {
+      orig.error("[Detour] Send failed:", e.message);
+      return false;
+    }
+  }
+
+  var pendingAsks = {};
+  var askIdCounter = 0;
+
+  bridgeAPI.send = function (message) {
+    sendMessage(MESSAGE_TYPES.PAGE_MESSAGE, { message });
+  };
+
+  bridgeAPI.ask = function (message, timeoutMs) {
+    return new Promise(function (resolve, reject) {
+      if (!ws || ws.readyState !== WebSocket.OPEN) {
+        return reject(new Error("Detour bridge not connected"));
+      }
+      var id = "ask-" + (++askIdCounter);
+      var timer = setTimeout(function () {
+        delete pendingAsks[id];
+        reject(new Error("Ask timed out"));
+      }, timeoutMs || 30000);
+      pendingAsks[id] = { resolve, reject, timer };
+      ws.send(JSON.stringify({ type: MESSAGE_TYPES.PAGE_ASK, id, message }));
+    });
+  };
+
+  // ── Status badge ──────────────────────────────────────────────────────
+  // Minimal badge shown before panel loads, replaced by FAB once panel mounts
+  var badge = document.createElement("div");
+  badge.id = "__detour-badge";
+  badge.setAttribute("style",
+    "position:fixed;bottom:12px;right:12px;z-index:2147483646;" +
+    "padding:6px 12px;border-radius:20px;font:600 12px/1 system-ui,sans-serif;" +
+    "color:#fff;background:#d44;opacity:0.92;pointer-events:none;" +
+    "transition:background .3s,opacity .3s;box-shadow:0 2px 8px rgba(0,0,0,.3);"
+  );
+  badge.textContent = "⚡ connecting…";
+
+  function showBadge() {
+    if (!badge.parentNode) (document.body || document.documentElement).appendChild(badge);
+  }
+  function hideBadge() {
+    if (badge.parentNode) badge.parentNode.removeChild(badge);
+  }
+  function setBadgeState(state) {
+    if (state === "connected") {
+      badge.textContent = "⚡ Detour: connected";
+      badge.style.background = "#1a8c3a";
+      badge.style.opacity = "0.92";
+      clearTimeout(badge._t);
+      badge._t = setTimeout(function () { badge.style.opacity = "0"; }, 3000);
+    } else if (state === "disconnected") {
+      badge.textContent = "⚡ Detour: disconnected";
+      badge.style.background = "#d44";
+      badge.style.opacity = "0.92";
+      clearTimeout(badge._t);
+    } else {
+      badge.textContent = "⚡ connecting…";
+      badge.style.background = "#c90";
+      badge.style.opacity = "0.92";
+      clearTimeout(badge._t);
+    }
+  }
+
+  // ── Context panel ─────────────────────────────────────────────────────
+  var panel = null;
+  function initPanel() {
+    if (panel || !_createPanel) return;
+    try {
+      panel = _createPanel(bridgeAPI);
+      panel.mount();
+      hideBadge();
+    } catch (e) {
+      orig.warn("[Detour] Panel init failed:", e.message);
+    }
+  }
+
+  // ── WebSocket connection ──────────────────────────────────────────────
+  function connect() {
+    setBadgeState("connecting");
+    showBadge();
+    try { ws = new WebSocket(WS_URL); } catch (e) {
+      setBadgeState("disconnected");
+      setTimeout(connect, RECONNECT_MS);
+      return;
+    }
+
+    ws.onopen = function () {
+      bridgeAPI.connected = true;
+      setBadgeState("connected");
+      orig.log("%c⚡ Detour bridge connected", "color:#0f0;font-weight:bold;font-size:13px");
+      orig.log("%c  Panel: click ⚡ FAB (bottom-right)", "color:#aaa");
+      ws.send(JSON.stringify({
+        type: MESSAGE_TYPES.IDENTIFY,
+        url: location.href,
+        title: document.title || location.hostname,
+      }));
+      // Init panel once connected
+      setTimeout(initPanel, 100);
+    };
+
+    ws.onmessage = function (event) {
+      var msg;
+      try { msg = JSON.parse(event.data); } catch (e) { return; }
+
+      if (msg.type === MESSAGE_TYPES.EVAL) handleEval(msg);
+      if (msg.type === MESSAGE_TYPES.ASK_REPLY) {
+        var pending = pendingAsks[msg.id];
+        if (pending) {
+          clearTimeout(pending.timer);
+          delete pendingAsks[msg.id];
+          if (msg.error) pending.reject(new Error(msg.error));
+          else pending.resolve(msg.reply);
+        }
+      }
+      if (msg.type === MESSAGE_TYPES.AGENT_REPLY && panel) {
+        panel.showAgentReply(msg.message);
+      }
+    };
+
+    ws.onclose = function () {
+      bridgeAPI.connected = false;
+      setBadgeState("disconnected");
+      showBadge();
+      orig.log("%c⚡ Detour bridge disconnected, reconnecting...", "color:#f80");
+      setTimeout(connect, RECONNECT_MS);
+    };
+
+    ws.onerror = function () { /* onclose fires */ };
+  }
+
+  connect();
+})();

package/providers/detour/src/contracts.js

@@ -0,0 +1,40 @@
+export const MESSAGE_TYPES = Object.freeze({
+  IDENTIFY: "identify",
+  CONSOLE: "console",
+  EVAL: "eval",
+  EVAL_RESULT: "eval.result",
+  PAGE_MESSAGE: "page.message",
+  PAGE_ASK: "page.ask",
+  ASK_REPLY: "ask.reply",
+  AGENT_REPLY: "agent.reply",
+  PAGE_CONTEXT: "page.context",
+  PAGE_ANNOTATE: "page.annotate",
+});
+
+export const DETAIL_LEVELS = Object.freeze({
+  COMPACT: "compact",
+  STANDARD: "standard",
+  DETAILED: "detailed",
+  FORENSIC: "forensic",
+});
+
+export const DETAIL_LEVEL_OPTIONS = Object.freeze([
+  { value: DETAIL_LEVELS.COMPACT, label: "Compact" },
+  { value: DETAIL_LEVELS.STANDARD, label: "Standard" },
+  { value: DETAIL_LEVELS.DETAILED, label: "Detailed" },
+  { value: DETAIL_LEVELS.FORENSIC, label: "Forensic" },
+]);
+
+export const INTENT_TOKENS = Object.freeze({
+  FIX: "fix",
+  CHANGE: "change",
+  QUESTION: "question",
+  APPROVE: "approve",
+});
+
+export const INTENT_OPTIONS = Object.freeze([
+  { value: INTENT_TOKENS.FIX, icon: "🔧", label: "Fix" },
+  { value: INTENT_TOKENS.CHANGE, icon: "✏️", label: "Change" },
+  { value: INTENT_TOKENS.QUESTION, icon: "❓", label: "Question" },
+  { value: INTENT_TOKENS.APPROVE, icon: "✅", label: "OK" },
+]);

package/providers/detour/src/inspector.js

@@ -0,0 +1,260 @@
+/**
+ * Element Inspector — extracts structured context from DOM elements.
+ *
+ * 4 detail levels:
+ *   compact:  element name + tag
+ *   standard: + selector, bounding box, viewport, tag path
+ *   detailed: + CSS classes, key styles, nearby text
+ *   forensic: + full DOM path, accessibility, React context, source file
+ */
+
+import { getReactContext, isReactDetected, getNearestComponentName } from "./react-context.js";
+import { DETAIL_LEVELS } from "./contracts.js";
+
+// ── Element identification ──────────────────────────────────────────────
+
+/**
+ * Deep element from point — pierces shadow DOM.
+ */
+export function deepElementFromPoint(x, y) {
+  let element = document.elementFromPoint(x, y);
+  while (element && element.shadowRoot) {
+    const deeper = element.shadowRoot.elementFromPoint(x, y);
+    if (!deeper || deeper === element) break;
+    element = deeper;
+  }
+  return element;
+}
+
+/**
+ * Build a concise CSS selector for an element.
+ */
+export function buildSelector(el) {
+  if (!el || el === document.body || el === document.documentElement) return el ? el.tagName.toLowerCase() : "";
+
+  if (el.id) return `#${CSS.escape(el.id)}`;
+
+  const tag = el.tagName.toLowerCase();
+  const classes = Array.from(el.classList)
+    .filter((c) => c.length < 30 && !/^[a-z]{6,}$/.test(c)) // skip hash classes
+    .slice(0, 3);
+
+  if (classes.length > 0) {
+    const sel = `${tag}.${classes.map(CSS.escape).join(".")}`;
+    if (document.querySelectorAll(sel).length === 1) return sel;
+  }
+
+  // Fallback: nth-child path
+  const parent = el.parentElement;
+  if (!parent) return tag;
+  const siblings = Array.from(parent.children).filter((c) => c.tagName === el.tagName);
+  if (siblings.length === 1) return `${buildSelector(parent)} > ${tag}`;
+  const idx = siblings.indexOf(el) + 1;
+  return `${buildSelector(parent)} > ${tag}:nth-child(${idx})`;
+}
+
+/**
+ * Build a human-readable tag path: article > section > div > button
+ */
+function buildTagPath(el) {
+  const parts = [];
+  let current = el;
+  let depth = 0;
+  while (current && current !== document.body && depth < 8) {
+    const tag = current.tagName.toLowerCase();
+    const cls = current.classList.length > 0 ? `.${Array.from(current.classList).slice(0, 2).join(".")}` : "";
+    parts.unshift(tag + cls);
+    current = current.parentElement;
+    depth++;
+  }
+  return parts.join(" > ");
+}
+
+/**
+ * Build full DOM path from document root.
+ */
+function buildFullPath(el) {
+  const parts = [];
+  let current = el;
+  while (current && current !== document) {
+    const tag = current.tagName ? current.tagName.toLowerCase() : "";
+    if (tag) parts.unshift(tag + (current.id ? `#${current.id}` : ""));
+    current = current.parentNode;
+  }
+  return parts.join(" > ");
+}
+
+// ── Style extraction ────────────────────────────────────────────────────
+
+const KEY_STYLE_PROPS = [
+  "display", "position", "color", "backgroundColor", "fontSize",
+  "fontWeight", "padding", "margin", "border", "borderRadius",
+  "width", "height", "overflow", "opacity", "zIndex",
+];
+
+function getKeyStyles(el) {
+  const computed = getComputedStyle(el);
+  const styles = {};
+  for (const prop of KEY_STYLE_PROPS) {
+    const val = computed[prop];
+    if (val && val !== "none" && val !== "normal" && val !== "auto" && val !== "0px" && val !== "rgba(0, 0, 0, 0)") {
+      styles[prop] = val;
+    }
+  }
+  return Object.keys(styles).length > 0 ? styles : undefined;
+}
+
+// ── Text extraction ─────────────────────────────────────────────────────
+
+function getNearbyText(el) {
+  const own = el.textContent || "";
+  const trimmed = own.replace(/\s+/g, " ").trim().slice(0, 150);
+  return trimmed || undefined;
+}
+
+// ── Accessibility ───────────────────────────────────────────────────────
+
+function getAccessibility(el) {
+  const info = {};
+  const role = el.getAttribute("role");
+  const ariaLabel = el.getAttribute("aria-label");
+  const ariaDescribedBy = el.getAttribute("aria-describedby");
+  const altText = el.getAttribute("alt");
+  const title = el.getAttribute("title");
+
+  if (role) info.role = role;
+  if (ariaLabel) info.ariaLabel = ariaLabel;
+  if (ariaDescribedBy) info.ariaDescribedBy = ariaDescribedBy;
+  if (altText) info.alt = altText;
+  if (title) info.title = title;
+
+  return Object.keys(info).length > 0 ? info : undefined;
+}
+
+// ── Element display name ────────────────────────────────────────────────
+
+export function getElementDisplayName(el) {
+  const tag = el.tagName.toLowerCase();
+  const reactName = getNearestComponentName(el);
+  if (reactName) return `<${reactName}> (${tag})`;
+  if (el.id) return `${tag}#${el.id}`;
+  if (el.classList.length > 0) return `${tag}.${Array.from(el.classList).slice(0, 2).join(".")}`;
+  return tag;
+}
+
+// ── Main extraction function ────────────────────────────────────────────
+
+/**
+ * Extract structured context from an element at a given detail level.
+ *
+ * @param {HTMLElement} element
+ * @param {string} detailLevel — "compact" | "standard" | "detailed" | "forensic"
+ * @returns {object} context
+ */
+export function extractElementContext(element, detailLevel = DETAIL_LEVELS.STANDARD) {
+  if (!element) return null;
+
+  const tag = element.tagName.toLowerCase();
+
+  // Compact: minimal info
+  const context = {
+    tag,
+    displayName: getElementDisplayName(element),
+  };
+
+  if (detailLevel === DETAIL_LEVELS.COMPACT) return context;
+
+  // Standard: + selector, bounding box, viewport, tag path
+  context.selector = buildSelector(element);
+  context.tagPath = buildTagPath(element);
+  const rect = element.getBoundingClientRect();
+  context.boundingBox = {
+    x: Math.round(rect.x),
+    y: Math.round(rect.y),
+    width: Math.round(rect.width),
+    height: Math.round(rect.height),
+  };
+  context.viewport = { width: window.innerWidth, height: window.innerHeight };
+  context.text = getNearbyText(element);
+
+  if (detailLevel === DETAIL_LEVELS.STANDARD) return context;
+
+  // Detailed: + classes, styles, nearby text
+  context.classes = element.className || undefined;
+  context.styles = getKeyStyles(element);
+
+  if (detailLevel === DETAIL_LEVELS.DETAILED) return context;
+
+  // Forensic: + full DOM path, accessibility, React context, source
+  context.fullDOMPath = buildFullPath(element);
+  context.accessibility = getAccessibility(element);
+
+  const reactCtx = getReactContext(element);
+  if (reactCtx) {
+    context.reactComponent = reactCtx.component;
+    context.reactHierarchy = reactCtx.hierarchy;
+    if (reactCtx.source) {
+      context.sourceFile = reactCtx.source.fileName;
+      if (reactCtx.source.lineNumber) context.sourceLine = reactCtx.source.lineNumber;
+    }
+  }
+
+  return context;
+}
+
+/**
+ * Generate structured markdown from annotations for AI consumption.
+ */
+function appendPageMarkdownHeader(lines) {
+  const url = location.href;
+  const title = document.title;
+
+  lines.push(`## Page Feedback: ${title}`);
+  lines.push(`**URL:** ${url}`);
+  lines.push(`**Viewport:** ${window.innerWidth}×${window.innerHeight}`);
+  if (isReactDetected()) lines.push(`**Framework:** React detected`);
+  lines.push("");
+}
+
+function formatAnnotationSource(context) {
+  if (!context?.sourceFile) return "";
+  return ` (${context.sourceFile}${context.sourceLine ? ":" + context.sourceLine : ""})`;
+}
+
+function annotationHeading(ann, num) {
+  const header = ann.context?.selector || ann.context?.displayName || `Annotation ${num}`;
+  return `${header}${formatAnnotationSource(ann.context)}`;
+}
+
+function appendAnnotationContextMarkdown(lines, ctx) {
+  if (ctx.tagPath) lines.push(`**Path:** ${ctx.tagPath}`);
+  if (ctx.classes) lines.push(`**Classes:** ${ctx.classes}`);
+  if (ctx.boundingBox) lines.push(`**Position:** ${ctx.boundingBox.x},${ctx.boundingBox.y} (${ctx.boundingBox.width}×${ctx.boundingBox.height}px)`);
+  if (ctx.reactComponent) lines.push(`**React:** ${ctx.reactHierarchy ? ctx.reactHierarchy.join(" > ") : ctx.reactComponent}`);
+  if (ctx.styles) lines.push(`**Styles:** ${JSON.stringify(ctx.styles)}`);
+  if (ctx.accessibility) lines.push(`**A11y:** ${JSON.stringify(ctx.accessibility)}`);
+  if (ctx.text) lines.push(`**Text:** "${ctx.text}"`);
+}
+
+function appendAnnotationMarkdown(lines, ann, num) {
+  lines.push(`### ${num}. ${annotationHeading(ann, num)}`);
+
+  if (ann.context) {
+    appendAnnotationContextMarkdown(lines, ann.context);
+  }
+
+  if (ann.intent) lines.push(`**Intent:** ${ann.intent}`);
+  if (ann.comment) lines.push(`**Feedback:** ${ann.comment}`);
+  lines.push("");
+}
+
+export function generateAnnotationMarkdown(annotations, detailLevel = DETAIL_LEVELS.STANDARD) {
+  const lines = [];
+  appendPageMarkdownHeader(lines);
+
+  for (let i = 0; i < annotations.length; i++) {
+    appendAnnotationMarkdown(lines, annotations[i], i + 1);
+  }
+
+  return lines.join("\n");
+}

package/providers/detour/src/inspector.test.mjs

@@ -0,0 +1,53 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import { generateAnnotationMarkdown } from "./inspector.js";
+
+test("generateAnnotationMarkdown preserves ordering, fallbacks, and formatting", () => {
+  globalThis.document = { title: "Checkout" };
+  globalThis.location = { href: "https://example.test/cart?step=pay" };
+  globalThis.window = { innerWidth: 1024, innerHeight: 768 };
+
+  const markdown = generateAnnotationMarkdown([
+    {
+      context: {
+        selector: "#pay",
+        displayName: "button.primary",
+        sourceFile: "/src/Checkout.jsx",
+        sourceLine: 42,
+        tagPath: "main > form > button.primary",
+        classes: "primary cta",
+        boundingBox: { x: 10, y: 20, width: 200, height: 40 },
+        reactComponent: "PayButton",
+        reactHierarchy: ["CheckoutPage", "PaymentForm", "PayButton"],
+        styles: { color: "rgb(255, 255, 255)", backgroundColor: "rgb(0, 0, 0)" },
+        accessibility: { role: "button", ariaLabel: "Pay now" },
+        text: "Pay now",
+      },
+      intent: "fix",
+      comment: "Make the loading state clearer.",
+    },
+    {
+      comment: "This annotation intentionally has no context.",
+    },
+  ]);
+
+  assert.equal(markdown, `## Page Feedback: Checkout
+**URL:** https://example.test/cart?step=pay
+**Viewport:** 1024×768
+
+### 1. #pay (/src/Checkout.jsx:42)
+**Path:** main > form > button.primary
+**Classes:** primary cta
+**Position:** 10,20 (200×40px)
+**React:** CheckoutPage > PaymentForm > PayButton
+**Styles:** {"color":"rgb(255, 255, 255)","backgroundColor":"rgb(0, 0, 0)"}
+**A11y:** {"role":"button","ariaLabel":"Pay now"}
+**Text:** "Pay now"
+**Intent:** fix
+**Feedback:** Make the loading state clearer.
+
+### 2. Annotation 2
+**Feedback:** This annotation intentionally has no context.
+`);
+});