@atlassian/chippy 0.0.0-stage → 0.0.1-beta.2

package/lib/mcp-skill/extension/content-script.js

@@ -0,0 +1,190 @@
+/* eslint-disable */
+// The content script owns extension UX/configuration and delegates MAIN-world
+// execution to the background service worker. It cannot inspect React fibers
+// directly, so it communicates through page events and runtime messages;
+// keeping this split also avoids injecting inline code through page CSP.
+(function chippyContentScript() {
+
+const DEFAULT_HELPER = 'http://127.0.0.1:7823';
+const BUNDLE_ATTR = 'data-chippy-bundle';
+const LOG_PREFIX = '[chippy-ext]';
+
+const pageStatus = {
+  status: 'booting',
+  detail: '',
+  updatedAt: new Date().toISOString(),
+  helperBaseUrl: DEFAULT_HELPER,
+  activated: false,
+};
+
+function error(...args) { console.error(LOG_PREFIX, ...args); }
+
+function getInjectionParent() {
+  return document.head || document.documentElement || document.body || null;
+}
+
+function appendToDocument(node, label, onAppended = null, attempt = 0) {
+  const parent = getInjectionParent();
+  if (parent) {
+    parent.appendChild(node);
+    onAppended?.();
+    return true;
+  }
+
+  if (attempt >= 50) {
+    error('failed to append node; no injection parent', { label, readyState: document.readyState });
+    return false;
+  }
+
+  window.setTimeout(() => appendToDocument(node, label, onAppended, attempt + 1), 20);
+  return false;
+}
+
+function normalizeBaseUrl(value) {
+  return String(value || DEFAULT_HELPER).replace(/\/+$/, '');
+}
+
+function getOriginKey() {
+  try {
+    return window.location.origin || null;
+  } catch {
+    return null;
+  }
+}
+
+function setStatus(status, detail = '') {
+  pageStatus.status = status;
+  pageStatus.detail = detail || '';
+  pageStatus.updatedAt = new Date().toISOString();
+}
+
+function writePageConfig(helperBaseUrl, activated) {
+  const normalizedBaseUrl = normalizeBaseUrl(helperBaseUrl);
+  pageStatus.helperBaseUrl = normalizedBaseUrl;
+  pageStatus.activated = Boolean(activated);
+}
+
+function injectBundle(helperBaseUrl) {
+  const base = normalizeBaseUrl(helperBaseUrl);
+
+  writePageConfig(base, true);
+  setStatus('injecting', 'background bundle');
+
+  chrome.runtime.sendMessage({ type: 'chippy-inject-bundle', helperBaseUrl: base }, (response) => {
+    if (chrome.runtime.lastError) {
+      error('injectBundle:background-error', { message: chrome.runtime.lastError.message });
+      setStatus('load-error', chrome.runtime.lastError.message);
+      return;
+    }
+
+    if (!response?.ok) {
+      error('injectBundle:background-failed', response || null);
+      setStatus('load-error', response?.error || 'Background injection failed');
+      return;
+    }
+
+    setStatus('loaded', response.detail || 'background bundle injected');
+  });
+}
+
+function disableBundle() {
+  writePageConfig(DEFAULT_HELPER, false);
+  // Dispatch a custom event so the page bridge can pick up deactivation
+  // without inline script injection (CSP-safe).
+  try {
+    document.dispatchEvent(new CustomEvent('chippy-ext-command', {
+      detail: { type: 'deactivate' },
+    }));
+  } catch {}
+  document.querySelectorAll(`script[${BUNDLE_ATTR}]`).forEach((node) => node.remove());
+  setStatus('disabled', getOriginKey() || 'disabled');
+}
+
+function applyStoredConfig() {
+  const origin = getOriginKey();
+  if (!origin) {
+    setStatus('unsupported', 'No origin');
+    return;
+  }
+
+  chrome.storage.local.get({
+    helperBaseUrl: DEFAULT_HELPER,
+    enabledOrigins: {},
+  }, (stored) => {
+    const enabled = Boolean(stored.enabledOrigins?.[origin]);
+    if (!enabled) {
+      setStatus('disabled', origin);
+      return;
+    }
+    injectBundle(normalizeBaseUrl(stored.helperBaseUrl));
+  });
+}
+
+chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
+  if (message.type === 'chippy-get-page-status') {
+    const bundle = document.querySelector(`script[${BUNDLE_ATTR}]`);
+    sendResponse({
+      ok: true,
+      result: {
+        origin: getOriginKey(),
+        status: pageStatus.status || 'unknown',
+        detail: pageStatus.detail || '',
+        updatedAt: pageStatus.updatedAt || null,
+        helperBaseUrl: pageStatus.helperBaseUrl || null,
+        activated: Boolean(pageStatus.activated),
+        bundlePresent: Boolean(bundle),
+        bundleSrc: bundle?.src || null,
+      },
+    });
+    return;
+  }
+
+  if (message.type === 'chippy-disable-now') {
+    disableBundle();
+    sendResponse({ ok: true });
+    return;
+  }
+
+  if (message.type === 'chippy-update-helper-url') {
+    const enabled = Boolean(message.enabled);
+    const helperBaseUrl = normalizeBaseUrl(message.helperBaseUrl);
+    writePageConfig(helperBaseUrl, enabled);
+    if (enabled) {
+      try {
+        document.dispatchEvent(new CustomEvent('chippy-ext-command', {
+          detail: { type: 'apply-config', helperBaseUrl, activated: true },
+        }));
+      } catch {}
+    }
+    setStatus('configured', helperBaseUrl);
+    sendResponse({ ok: true });
+    return;
+  }
+});
+
+// The page bridge asks for early startup on the next navigation before an armed
+// reload. Only the background can register the MAIN-world startup scripts. The
+// background also re-runs this file, so the relay is installed once per document.
+function relayArmedReload() {
+  const reply = (result) => {
+    try {
+      document.dispatchEvent(new CustomEvent('chippy-armed-reload-ready', { detail: JSON.stringify(result || {}) }));
+    } catch {}
+  };
+  try {
+    chrome.runtime.sendMessage({ type: 'chippy-register-armed-reload' }, (response) => {
+      if (chrome.runtime.lastError) reply({ ok: false, error: chrome.runtime.lastError.message });
+      else reply(response);
+    });
+  } catch (e) {
+    reply({ ok: false, error: e.message });
+  }
+}
+if (!globalThis.__chippyArmedReloadRelay) {
+  globalThis.__chippyArmedReloadRelay = true;
+  document.addEventListener('chippy-armed-reload-prepare', relayArmedReload);
+}
+
+applyStoredConfig();
+
+})();

package/lib/mcp-skill/extension/devtools-hook-shim.js

@@ -0,0 +1,85 @@
+/* eslint-disable */
+/**
+ * DevTools-hook shim.
+ *
+ * Must be installed BEFORE react-dom evaluates. React-DOM checks for
+ *   window.__REACT_DEVTOOLS_GLOBAL_HOOK__
+ * at module evaluation time. If a hook with `inject(internals)` is present,
+ * react-dom registers itself into hook.renderers, which exposes the
+ * `currentDispatcherRef` that Avalanche debug-render needs to capture hook
+ * call stacks.
+ *
+ * Without this shim in place at evaluation time, hook.renderers stays empty,
+ * debug-render cannot patch the dispatcher, and `debugHook()` collapses to
+ * a flat fallback (no custom-hook ancestry, no folders).
+ *
+ * Idempotent: never overwrites an existing real hook (e.g. real React DevTools
+ * extension). Only installs an empty shim when nothing is there yet.
+ *
+ * Browser extension content-script and the local Playwright path both load
+ * this script BEFORE the page bootstraps React.
+ */
+(function chippyDevtoolsHookShim(global) {
+  try {
+    if (global.__REACT_DEVTOOLS_GLOBAL_HOOK__) return;
+
+    var renderers = new Map();
+    // Committed FiberRoots per renderer, tracked like React DevTools does so
+    // tree walks start from the live root instead of a container's stale
+    // HostRoot alternate.
+    var fiberRoots = new Map();
+    function rootsFor(id) {
+      var roots = fiberRoots.get(id);
+      if (!roots) { roots = new Set(); fiberRoots.set(id, roots); }
+      return roots;
+    }
+    var hook = {
+      __chippyShim: true,
+      supportsFiber: true,
+      renderers: renderers,
+      inject: function inject(renderer) {
+        var id = (renderers.size || 0) + 1;
+        renderers.set(id, renderer);
+        return id;
+      },
+      getFiberRoots: function getFiberRoots(id) { return rootsFor(id); },
+      onScheduleFiberRoot: function () {},
+      onCommitFiberRoot: function onCommitFiberRoot(id, root) {
+        if (!root || !root.current) return;
+        var roots = rootsFor(id);
+        var state = root.current.memoizedState;
+        var unmounting = !state || state.element == null;
+        if (unmounting) roots.delete(root);
+        else roots.add(root);
+      },
+      onCommitFiberUnmount: function () {},
+      onPostCommitFiberRoot: function () {},
+    };
+
+    Object.defineProperty(global, '__REACT_DEVTOOLS_GLOBAL_HOOK__', {
+      configurable: true,
+      enumerable: true,
+      get: function () { return hook; },
+      set: function (next) {
+        // Real DevTools may try to install later. Accept it but preserve any
+        // renderers we already collected so debug-render can still find them.
+        if (next && typeof next === 'object') {
+          if (!next.renderers || (next.renderers.size === 0 && renderers.size > 0)) {
+            try { next.renderers = renderers; } catch (_) {}
+          }
+          hook = next;
+        }
+      },
+    });
+
+    // Cross-iframe note: if running in a top-frame, mirror so child iframes
+    // (Storybook iframe.html) can rely on it too. Safe no-op otherwise.
+    try {
+      if (global.top && global.top !== global && !global.top.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
+        global.top.__REACT_DEVTOOLS_GLOBAL_HOOK__ = hook;
+      }
+    } catch (_) {}
+  } catch (_) {
+    // Never throw at page boot. A failed shim must degrade silently.
+  }
+})(typeof globalThis !== 'undefined' ? globalThis : window);

package/lib/mcp-skill/extension/early-bootstrap.js

@@ -0,0 +1,49 @@
+/* eslint-disable */
+// Runs in MAIN before React evaluates. This phase exists only to establish
+// timing-sensitive page contracts (startup config and the registered commit
+// metrics adapter's pre-page hook). The actual Chippy bridge is injected
+// later, after owner arbitration, so a user-controlled Storybook/import
+// integration can win.
+(function chippyEarlyBootstrap() {
+  if (globalThis.__CHIPPY_EARLY_BOOTSTRAP_INSTALLED__) {
+    return;
+  }
+
+  // Without a config this run does nothing, so a later run that has one (the
+  // background's startup injection) must still be able to bootstrap.
+  const cfg = globalThis.__CHIPPY_STARTUP_CONFIG || null;
+  if (!cfg || !cfg.enabled) {
+    return;
+  }
+  globalThis.__CHIPPY_EARLY_BOOTSTRAP_INSTALLED__ = true;
+
+  globalThis.__CHIPPY = globalThis.__CHIPPY || {};
+
+  globalThis.__CHIPPY.config = {
+    ...(globalThis.__CHIPPY.config || {}),
+    helperBaseUrl: cfg.helperBaseUrl,
+    activated: true,
+    avalanche: cfg.avalanche ? {
+      autoStart: true,
+      max: (cfg.avalanche && cfg.avalanche.max) || 500,
+      options: (cfg.avalanche && cfg.avalanche.options) || {},
+    } : { autoStart: false, max: 500 },
+  };
+
+  // Run the registered commit metrics adapter's pre-page hook. It must run
+  // before the page's React evaluates (for example, the ATL adapter installs a
+  // configurable metrics-slot accessor). avalanche.iife.js loads before this
+  // script, so the registry is populated. A failure here is non-fatal:
+  // Avalanche falls back to DevTools integration.
+  try {
+    if (globalThis.__AVALANCHE__ && typeof globalThis.__AVALANCHE__.runPrePageHooks === 'function') {
+      globalThis.__AVALANCHE__.runPrePageHooks(cfg);
+    }
+  } catch (_e) {
+    // Non-fatal.
+  }
+
+  if (globalThis.__AVALANCHE__) {
+    return;
+  }
+})();

package/lib/mcp-skill/extension/inspect-react.js

@@ -0,0 +1,216 @@
+/* eslint-disable */
+(function installInspectReact(global) {
+  const chippy = global.__CHIPPY = global.__CHIPPY || {};
+  // Always reinstall — guards caused stale code to win after extension reload.
+
+  function getReactInternalKeys(node) {
+    if (!node) {
+      return [];
+    }
+
+    return Object.getOwnPropertyNames(node).filter(
+      (key) =>
+        key.startsWith('__reactFiber$') ||
+        key.startsWith('__reactProps$') ||
+        key.startsWith('__reactContainer$'),
+    );
+  }
+
+  function getFiberFromNode(node) {
+    if (!node) {
+      return null;
+    }
+
+    const fiberKey = getReactInternalKeys(node).find((key) => key.startsWith('__reactFiber$'));
+    const containerKey = getReactInternalKeys(node).find((key) => key.startsWith('__reactContainer$'));
+
+    return node[fiberKey] || node[containerKey] || null;
+  }
+
+  function getClosestFiber(node) {
+    let current = node;
+
+    while (current) {
+      const fiber = getFiberFromNode(current);
+      if (fiber) {
+        return fiber;
+      }
+      current = current.parentNode || current.host || null;
+    }
+
+    return null;
+  }
+
+  function getDisplayName(type) {
+    if (!type) {
+      return null;
+    }
+    if (typeof type === 'string') {
+      return type;
+    }
+    return type.displayName || type.name || type.render?.displayName || type.render?.name || 'Anonymous';
+  }
+
+  function normalizeSource(source) {
+    if (!source) {
+      return null;
+    }
+
+    return {
+      fileName: source.fileName || null,
+      lineNumber: source.lineNumber || null,
+      columnNumber: source.columnNumber || null,
+    };
+  }
+
+  function sourceOf(fiber) {
+    const describeFiberSource = global.__AVALANCHE__?.layoutLab?.describeFiberSource;
+    return typeof describeFiberSource === 'function'
+      ? describeFiberSource(fiber)
+      : normalizeSource(fiber?._debugSource || fiber?.type?._debugSource || null);
+  }
+
+  function describeFiber(fiber) {
+    if (!fiber) {
+      return null;
+    }
+
+    return {
+      key: fiber.key ?? null,
+      tag: fiber.tag ?? null,
+      index: fiber.index ?? null,
+      elementType: getDisplayName(fiber.elementType),
+      type: getDisplayName(fiber.type),
+      stateNodeType:
+        fiber.stateNode && fiber.stateNode.nodeType === 1
+          ? fiber.stateNode.tagName.toLowerCase()
+          : typeof fiber.stateNode,
+      debugSource: sourceOf(fiber),
+      memoizedPropsKeys: fiber.memoizedProps ? Object.keys(fiber.memoizedProps) : [],
+    };
+  }
+
+  function isCompositeFiber(fiber) {
+    if (!fiber) {
+      return false;
+    }
+
+    const name = getDisplayName(fiber.type);
+    return Boolean(name && typeof fiber.type !== 'string');
+  }
+
+  function getOwnerChain(fiber) {
+    const owners = [];
+    let current = fiber ? fiber._debugOwner : null;
+
+    while (current) {
+      owners.push(describeFiber(current));
+      current = current._debugOwner || null;
+    }
+
+    return owners;
+  }
+
+  function getReturnChain(fiber) {
+    const parents = [];
+    let current = fiber ? fiber.return : null;
+
+    while (current) {
+      parents.push(describeFiber(current));
+      current = current.return || null;
+    }
+
+    return parents;
+  }
+
+  function getNearestCompositeFiber(fiber) {
+    let current = fiber;
+
+    while (current) {
+      if (isCompositeFiber(current)) {
+        return current;
+      }
+      current = current.return || null;
+    }
+
+    return null;
+  }
+
+
+  function getNearestTestIdParent(node) {
+    // Walk includes the node itself — if the probed element has data-testid, that wins.
+    let current = node || null;
+    while (current) {
+      const testId = current.dataset ? current.dataset.testid : null;
+      if (testId) {
+        const fiber = getFiberFromNode(current) || getClosestFiber(current);
+        const componentFiber = getNearestCompositeFiber(fiber);
+        return {
+          testId,
+          tagName: current.tagName ? current.tagName.toLowerCase() : null,
+          component: describeFiber(componentFiber),
+          fiber: describeFiber(fiber),
+        };
+      }
+      current = current.parentElement || null;
+    }
+    return null;
+  }
+
+  function inspectNode(node) {
+    const fiber = getFiberFromNode(node) || getClosestFiber(node);
+    const componentFiber = getNearestCompositeFiber(fiber);
+
+    return {
+      dom: node
+        ? {
+            tagName: node.tagName ? node.tagName.toLowerCase() : null,
+            text: node.textContent?.trim() || '',
+            reactKeys: getReactInternalKeys(node),
+          }
+        : null,
+      fiber: describeFiber(fiber),
+      component: describeFiber(componentFiber),
+      owners: getOwnerChain(componentFiber || fiber),
+      returns: getReturnChain(componentFiber || fiber),
+      nearestTestIdParent: getNearestTestIdParent(node),
+    };
+  }
+
+  function findByText(text, root = document) {
+    return Array.from(root.querySelectorAll('*'))
+      .filter((node) => node.textContent?.trim() === text)
+      .map((node) => ({
+        node,
+        inspection: inspectNode(node),
+      }));
+  }
+
+  function findBySelector(selector, root = document) {
+    return Array.from(root.querySelectorAll(selector)).map((node) => ({
+      node,
+      inspection: inspectNode(node),
+    }));
+  }
+
+  function inspectAtPoint(x, y) {
+    return document.elementsFromPoint(x, y).map((node) => ({
+      node,
+      inspection: inspectNode(node),
+    }));
+  }
+
+  chippy.inspectReact = {
+    getReactInternalKeys,
+    getFiberFromNode,
+    getClosestFiber,
+    getNearestCompositeFiber,
+    describeFiber,
+    getOwnerChain,
+    getReturnChain,
+    inspectNode,
+    inspectAtPoint,
+    findByText,
+    findBySelector,
+  };
+})(window);